javascript - 如何将数据传递给嵌套的子组件vue js？

Question

在以下情况下，我知道如何使用 Prop 将数据从 parent 传递给 child :

<template>
<div>
      <div v-for="stuff in content" v-bind:key="stuff.id">
        <ul>
          <li>
            {{ stuff.items }}
          </li>
        </ul>
      </div>
</div>
</template>

<script>
export default {
  name: stuff,
  props: ['content'],
  data () {
    return {

    }
  }
}
</script>

然后将数据绑定(bind)到父组件中的组件，如

<template>
  <div>
    <stuff v-bind:content="stuffToPass"></stuff>
  </div>
</template>
<script>
import stuff from './stuff.vue';
export default {
  data () {
    return {
      stuffToPass: [
        {id: 1, items: 'foo'},
        {id: 2, items: 'bar'},
        {id: 3, items: 'baz'}
      ]
    }
  },
  components: {
    stuff
  }
}
</script>

但是假设我有根组件，我想将数据传递给 stuff 组件，就像上面那样，但是当我有许多其他组件时，比如 parent > x > y > stuff，它仍然是最终将接收该数据的 stuff 组件，我不知道该怎么做。

我听说过提供/注入(inject)，但我不确定这是否合适，或者至少我无法让它工作。

然后我尝试传递 props，但后来我发现自己试图将 prop 绑定(bind)到组件以作为 prop 传递给子组件，这听起来不对，所以我只是重新编写了我的组件'stuff' 组件，但我觉得这可能是重新编写大量代码的方式以接近合理。

Answer 1

有几种可能性可以传递数据 parent > x > y > stuff

• props - 适用但您必须通过所有组件传输数据...
• store (vuex) - 适用但处理起来可能会变得复杂
• 事件总线 - 最灵活直接的方式

下面是一个关于如何实现事件总线的简单示例:

// src/services/eventBus.js

import Vue from 'vue';
export default new Vue();

您要从中发出事件的代码:

// src/components/parent.vue

<script>
import EventBus from '@/services/eventBus';

export default {
  ...
  methods: {
    eventHandler(val) {
      EventBus.$emit('EVENT_NAME', val);
    },
  },
  ...
};
</script>

你想在哪里监听事件的代码:

// src/components/stuff.vue

<script>
import EventBus from '@/services/eventBus';

export default {
  ...
  mounted() {
    EventBus.$on('EVENT_NAME', val => {
      // do whatever you like with "val"
    });
  },
  ...
};
</script>