Обмен данными динамического дочернего компонента

Question

Я новичок в 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 
    } 
} 

Так что, когда вид является view1 затем использовать data1 , вид является view2 использование data2 и т.д ...

Могу ли я использовать некоторые данные синхронизации в шаблоне дочернего компонента?

шаблон компонента ребенок

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

Что об использовании партиалы? Я не видел много документации по нему, может кто-то уточнить его использование в отличие от компонентов?

Answer 1

Вы все еще можете синхронизировать данные с дочерними компонентами в обычном режиме, используя реквизиты. Прежде всего, определить, что реквизит вы хотите получить в определении компонента, т.е.

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