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>

パーシャルの使用はどうですか？コンポーネントとは対照的に、誰かがその使用について詳しく説明できますか?

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 に答える