Vuejs2 Vue子组件未渲染

我有两个部分：

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

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

Vue.component（'page'{
道具：[“页面”]，
模板：“
{{pages.title}
”
})
Vue.组件（'块'{
道具：[“积木”]，
模板：“{blocks.id}”
})

“页面”是父组件，“块”是子组件

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">
    <block v-for="block in blocks" v-bind:blocks="block"></block>
</page>

---

“块”组件根本不会被呈现，而当它被放置在父“页面”组件之外时，它会被呈现。我觉得我遗漏了一些明显的东西，但这是什么？

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

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>`
});

var块={
道具：[“积木”]，
模板：“{blocks.id}”
});
Vue.component（'页面'{
数据：函数（）{
返回{
页面：[{title:'Some title'，块：[{id:1，{id:2}，{id:3]}]
}
},
组成部分：{
街区：街区，
},
道具：[“页面”]，
模板：`
{{pages.title}}
`
});

然后使用页面组件，如：

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

---

您可以查看

恐怕这不起作用。我得到的是“未知自定义元素：”。我还觉得这个解决方案不太正确，如果可能的话，我希望将两者作为单独的组件保留。它们仍然是单独的组件，唯一的区别是块现在在本地注册。如果您希望保留到目前为止的内容，那么您应该更改使用页面和块组件的方式。标记之间的区别是什么将被您在template属性中定义的内容替换，因此您的块组件将永远不会显示。您应该更改页面的模板以使用其中的块组件。我发现此JSBin:这符合我的要求，没有循环。是否仅可以使用静态组件？当我们使用时，您可以在子组件中使用for循环在实例上未定义“属性或方法”页，但在呈现过程中引用了您的代码。我假设这是来自page.blocks，是否应该不同？