Question

我有两个组成部分：

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

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

＆＃34;页＆＃34;是父组件，＆＃34; Block＆＃34;儿童组成部分。

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

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

＆＃34; Block＆＃34;组件根本没有被渲染，而它被放置在父组件之外。零件。我觉得我错过了一些明显的东西，但它是什么？

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子组件无法呈现

1 个答案: