VUE/VUEX：子供テンプレートに親テンプレートからのデータを渡す方法を

Question

VUE 2.0とVUEXを使用して、私はparentからchildにデータを渡す方法については少し混乱しています。

<template> 
    <div id="app" class="container"> 
    <div class="card" v-for="(triad, index) in triads"> 
     <div class="row"> 
     <div class="col-sm-4"> 
      <people /> 
     </div> 
     <div class="col-sm-4"> 
      <places /> 
     </div> 
     <div class="col-sm-4"> 
      <equipment /> 
     </div> 
     </div> 
    </div> 
    </div> 
</template> 

私は"トライアド" という名前の配列によってをループしています：

state: { 
    triads: [ 
    { 
     people: [], 
     places: [], 
     equipment: [] 
    } 
    ] 
} 

私は<people />、<places />と<equipment />にtriad変数を送りたいです。

---

にはどうすれば子テンプレートに親テンプレートからコンテンツを取得するのですか？ありがとうございました。

Answer 1

子コンポーネントにPROPを追加してデータをバインドするだけで済みます。

など。あなただけのデータを渡すためにvuexを必要としない

Vue.component('people', { 
    // declare the props 
    props: ['yourProp'], 
    // just like data, the prop can be used inside templates 
    // and is also made available in the vm as this.message 
    template: '<span>{{ yourProp }}</span>' 
}) 

：あなたの子コンポーネント（：https://vuejs.org/v2/guide/components.html#Propsドキュメントごとなど）で<people :yourProp='triad'>

。コンポーネント間で状態を共有するには、Vuexが必要です（双方向）。

Answer 2

あなたはそうのような小道具を言及し、小道具

---

及びこれらの子コンポーネントの各内部

<template> 
    <div id="app" class="container"> 
    <div class="card" v-for="(triad, index) in triads"> 
     <div class="row"> 
     <div class="col-sm-4"> 
      <people :someproperty='triad'></people> 
     </div> 
     <div class="col-sm-4"> 
      <places :someproperty='triad'></places> 
     </div> 
     <div class="col-sm-4"> 
      <equipment :someproperty='triad'></equipement> 
     </div> 
     </div> 
    </div> 
    </div> 
</template> 

によって性質を下に渡すことができます

export default { 
    props: ['someproperty'] 
} 

---

Iあなたの親コンポーネントもプロパティに直接アクセスできないと思うので、親のmapGettersを使用してそれと同時に、あなたの国にもゲッターがあることになります。

state: { 
    triads: [ 
    { 
     people: [], 
     places: [], 
     equipment: [] 
    } 
    ] 
}, 
getters: { 
    getTriads: (state) => { 
    return state.triads 
    } 
} 

---

さて、あなたはあなたの親にmapGettersを使用することができます。

import { mapGetters } from 'vuex' 

export default { 
    computed: { 
    ...mapGetters({ 
     'triads': 'getTriads' 
    }) 
    } 
} 

それは、セットアップの多すぎる場合は、ちょうどこの

export default { 
    computed: { 
    triads() { 
    /** 
    * You could also try, return this.$store.state.triads 
    * but DONT do that, that defeats the purpose of using vuex. 
    */ 
     return this.$store.getters.getTriads 
    } 
    } 
}