javascript - 不断向上链传播事件

Question

如果我有嵌套的子组件，我想将事件一直传播到根组件，是否有任何简单的方法来传递事件？

即

<root @custom_event="doSomething" @another_event="doSomethingElse">
    <child1 @custom_event="passItAlong" @another_event="passItAlong">
        <child2 @custom_event="passItAlong" @another_event="passItAlong">
             <child3 @click="$emit('custom_event', 'data')">
             </child3>
        </child2>
    </child1>
</root>

Answer 1

这里有多种选择:

1. 您可以使用this.$root.$emit然后事件将立即发送到所有组件，您可以将其监听为 this.$root.$on
2. 您可以创建eventBus如上所述 here然后在任何需要的地方使用它:

// The most basic event bus

// Imprt vue.js
import Vue from 'vue';

// Create empty vue.js instance to use as event bus
const Bus = new Vue({});

// Export event bus instance
export default Bus;

// Using the most basic event bus

import Vue from 'vue';
import Bus from './basic';

Vue.component('my-first-component', {
  methods: {
    sampleClickAction() {
       Bus.$emit('my-sample-event');
    }
  }
});

Vue.component('my-second-component', {
  created() {
    Bus.$on('my-sample-event', () => {
      // Do something…
    });
  }
});