Swapping dynamic child component data

Question

I'm new to vuejs and I have a problem where the I have a parent component with a couple of child components who swap in and out using <component :is="view"> where view is the parent component's property. The problem is that each child components has to be populated with different datasets stored in the parent component...thus

parent component

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

So when view is view1 then use data1, view is view2 use data2 etc...

can I there for use some sync data in the child component's template?

child component template

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

What about using partials? I did not see much documentation on it can someone elaborate on its use as opposed to components?

David David · Accepted Answer · 2016-08-11T08:07:02

You can still sync data with the child components in a normal fashion by using props. First you define what props you want to receive in the component definition, i.e.

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

Then you pass this data through when dynamically swapping the component, i.e.

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

And in the parent component you can then connect the data to a specific view by, for example, putting it in the same object, such as:

    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"
            }
    },

And then I use a computed value to determine which of the views should be shown.

See the JSFiddle

Swapping dynamic child component data

1 Answers