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: [] 
    } 
    ] 
} 

Я хочу послать переменную triad в <people />, <places /> и <equipment />.

---

Как получить содержимое из родительского шаблона для шаблона в ребенка? Спасибо.

Answer 1

Вам просто нужно добавить PROP к вашим дочерним компонентам, а затем привязать данные.

E.g. <people :yourProp='triad'>

В своих дочерних компонентов (как в документации: https://vuejs.org/v2/guide/components.html#Props):

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>' 
}) 

вам не нужно vuex просто передать данные. Вам необходимо, чтобы 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 
    } 
    } 
}