交换动态子组件数据答案

【问题标题】：Swapping dynamic child component data交换动态子组件数据
【发布时间】：2016-12-17 13:22:27
【问题描述】：

我是 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 怎么样？我没有看到太多关于它的文档，有人可以详细说明它的用途而不是组件吗？

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

您仍然可以通过使用 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

【讨论】：