Question

在以下代码中，当父级的模板为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'
    }
  }
})

谢谢。

Answer 1

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

<lastnamecmp></lastnamecmp>

+ 在Vue实例中

components: {
   'lastnamecmp': LastNameCmp
}

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

VueJS：当父模板不在x-template中时，为什么子组件无法渲染？

1 个答案: