Vue的子组件没有渲染

我有2个部分组成：Vue的子组件没有渲染

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

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

“页”是父组件，而“块”的子组件。

组分两者都包含一个环通过一个磁盘阵列：

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

“块”成分并不是在所有的渲染，而它是当放置在父“页”组件的外面。我觉得我失去了一些明显的东西，但它是什么？

来源

2016-12-28 Mitchel Jager

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

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

来源

2016-12-28 00:24:27 Nora

这恐怕是行不通的。我得到“未知的自定义元素：”。我也觉得这个解决方案不太对，我想尽可能将它们作为单独的组件。 –

它们仍然是独立的组件，唯一的区别是现在块已在本地注册。如果您宁愿保留迄今为止的内容，那么您应该改变使用页面和块组件的方式。标记之间的内容将被您在模板属性中定义的内容替换，因此您的块组件将永远不会显示。您应该更改页面的模板以使用其中的块组件。 – Nora

我发现这个JSBin：https://jsbin.com/boluhe/3/edit?html,js,output这就是我想要的，没有循环。它只能用静态组件吗？ –

Vue的子组件没有渲染

回答

相关问题