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

Question

使用 VUE 2.0 和 VUEX 我对如何将数据从 parent 传递到 [=13] 有点困惑=].

<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 />。

如何从父模板获取内容到子模板？谢谢。

Answer 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 在组件之间共享状态 (bi-directional)。

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

在每个 children 组件中，像这样提及道具：

export default {
  props: ['someproperty']
}

我认为您的 parent 组件也无法直接访问属性，因此您可以使用 parent 中的 mapGetters 来访问它，同时，因此，您的州也有 getter.

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

现在，您可以在 parent:

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

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

VUE / VUEX: How To Pass Data From Parent Template To Child Template

vue.js

vuex