VueJS：当父模板不是x-template时，为什么子组件没有被渲染？答案

【问题标题】：VueJS: Why child component does not get rendered, when parent template in not x-template?VueJS：当父模板不是x-template时，为什么子组件没有被渲染？
【发布时间】：2019-03-13 06:52:39
【问题描述】：

在下面的代码中，当父模板为text/x-template时，子组件（在父组件内）被渲染：

<script type="text/x-template id="#list">
  <div class="wrapper">
    <p>{{firstName}} - 
      <button @click="changeFirstName">Change</button>
    </p>
    <LastNameCmp></LastNameCmp>    
  </div>
</script>

然而，如下所示，如果父模板是从 html 派生的，则子组件不会被渲染。为什么会这样？

模板

<div id="app">
  <div class="wrapper">
    <p>{{firstName}} - 
      <button @click="changeFirstName">Change</button>
    </p>
    <LastNameCmp></LastNameCmp>    
  </div>
</div>


<script type="text/x-template" id="item">
  <div><p>{{lastName}} - <button @click="changeLastName">Change</button></p></div>
</script>

VueJS

var LastNameCmp = {
  template: '#item',
  data() {
    return {
      lastName: 'Sharma'
    }
  },
  methods: {
    changeLastName: function() {
      this.lastName = 'Abrahim'
    }
  }
}

new Vue({
  el: '#app',
  components: {
    LastNameCmp
  },
  data: {
        firstName: 'Rajat'
  },
  methods: {
    changeFirstName: function() {
      this.firstName = 'John'
    }
  }
})

谢谢。

【问题讨论】：

标签： vuejs2

【解决方案1】：

尝试将LastNameCmp更改为last-name-cmp或lastnamecmp 在你的模板中像

<lastnamecmp></lastnamecmp>

+ 在 Vue 实例中

components: {
   'lastnamecmp': LastNameCmp
}

请看https://vuejs.org/v2/guide/components-props.html

【讨论】：