VUE / VUEX：如何将数据从父模板传递到子模板答案

【问题标题】：VUE / VUEX: How To Pass Data From Parent Template To Child TemplateVUE / VUEX：如何将数据从父模板传递到子模板
【发布时间】：2017-07-02 17:18:01
【问题描述】：

使用 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>

我正在循环通过一个名为“triads”的数组：

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

我想将triad 变量发送到<people />、<places /> 和<equipment />。

如何将父模板中的内容获取到子模板？谢谢。

【问题讨论】：

人、地、设备是独立的组成部分吗？
是的 ;-) 我只是想分发数据

标签： vue.js vuex

【解决方案1】：

您只需将 PROP 添加到您的子组件，然后绑定数据。

例如<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 在组件之间共享状态（双向）。

【讨论】：

好吧，你能更深入地解释一下吗？我对 vue 和 vuex 很陌生。不过谢谢。

【解决方案2】：

你可以通过props的方式传递属性

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

我认为您的父组件也无法直接访问该属性，因此您可以在父组件中使用 mapGetters 来访问它，同时，您的状态也有一个 getter。

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

【讨论】：