0

我是 vuejs 的新手，我有一个问题，我有一个父组件和几个子组件，它们使用父组件的属性<component :is="view">在哪里交换进出。view问题是每个子组件都必须填充存储在父组件中的不同数据集......因此

父组件

<template>
 <component :is="view"></component>
</template>
  export default {
   props: ["view"],
   data() { return {data1:[..], data2:[...], ... } }
   components : {
    "view1" : View1,
    "view2" : View2,
    "view3" : View3
   }
}

所以当view是view1然后使用data1，view是view2使用data2等等......

我可以在子组件的模板中使用一些同步数据吗？

子组件模板

<template>
 <div class="child" v-for"data in data1" :data1="data1">
  {{* data}}
 </div>
</template>

使用partials怎么样？我没有看到太多关于它的文档，有人可以详细说明它的用途而不是组件吗？

4

1 回答 1

3

您仍然可以使用 props 以正常方式与子组件同步数据。首先，您在组件定义中定义要接收的道具，即

Vue.component("exclamation-box",{
    template: "#exclamation-box-template",
    props: ['data']
});

然后在动态交换组件时传递这些数据，即

<component :is="view.component" :data="view.data"></component>

然后在父组件中，您可以将数据连接到特定视图，例如，将其放在同一个对象中，例如：

    data: {
        components: {
            view0: {
                component: "question-box",
                data: "View 0"
            },
            view1: {
                component: "question-box",
                data: "View 1"
            },
            view2: {
                component: "exclamation-box",
                data: "View 2"
            },
            view3: {
                component: "question-box",
                data: "View 3"
            }
    },

然后我使用计算值来确定应该显示哪些视图。

请参阅JSFiddle

于 2016-08-11T08:07:02.820 回答