動的子コンポーネントのデータを交換する

Question

私はvuejsを初めて使用しています。親コンポーネントには、<component :is="view">を使用してスワップアウトする子コンポーネントが2つあります。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

データを子コンポーネントと通常のやり方で同期させることができます。まず、あなたがして、動的にコンポーネントを交換するとき、あなたはあなたができるすなわち

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

そして、親コンポーネントでは、てこのデータを渡すすなわち

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

、あなたがコンポーネント定義で受信したい小道具かを定義します例えば、によって特定のビューにデータを接続するなど、同じオブジェクトに入れる：

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

そしてIは、決定するために計算された値を使用してどのビューが表示されるはずです。

JSFiddle