Vue 子组件不渲染

Question

我有两个组件：

Vue.component('page', {
  props: ['pages'],
  template: '<li>{{ pages.title }}</li>'
})

Vue.component('block', {
  props: ['blocks'],
  template: '<div>{{ blocks.id }}</div>'
})

"Page"是父组件，"Block"是子组件。

两个组件都包含一个数组循环：

<page v-for="page in pages" v-bind:pages="page">
    <block v-for="block in blocks" v-bind:blocks="block"></block>
</page>

"Block" 组件根本没有被渲染，而当它被放置在父 "Page" 组件之外时。我觉得我错过了一些明显的东西，但那是什么？

Answer 1

您应该将块组件包含在页面组件的组件列表中。

var block = {
   props: ['blocks'],
   template: '<div>{{ blocks.id }}</div>'
});

Vue.component('page', {
   data: function () {
     return {
       pages: [{title: 'Some title', blocks: [{id: 1, {id: 2}, {id: 3]}]
     }
   },
   components: {
     block: block,
   },
   props: ['pages'],
   template: `<li>{{ pages.title }}<block v-for="block in page.blocks" v-bind:blocks="block"></block></li>`
});

然后像这样使用页面组件：

<page v-for="page in pages" v-bind:pages="page"></page>

您可以查看 documentation

Vue 子组件不渲染

Vue child component not rendering

vuejs2