1,创建 bus.js 文件。
const install = function (Vue) {
const bus = new Vue({
methods: {
emit(event, ...args) {
this.$emit(event, ...args);
},
on(event, callback) {
this.$on(event, callback);
},
off(event, callback) {
this.$off(event, callback);
}
}
});
Vue.prototype.$bus = bus;
};
export default install;
2,在 main.js 中引入,并使用。
import bus from './bus.js';
Vue.use(bus);
3,创建一个子组件:child.vue
<template>
<div>{{count}}</div>
</template>
<script>
export default {
name: 'child',
props: {
count: { // 接受來自父組件的 count
type: Number
}
},
methods: {
handleCount() {
const num = 1;
this.$bus.emit('add', num); // 將 num 傳給父組件,add 方法是父子组件商量好的命名。
}
}
}
</script>
4,创建一个父组件:father.vue
<template>
<div>
<counter :count="count"></counter>
</div>
</template>
<script>
import counter from './counter';
export default {
name: 'father',
data() {
return {
count: 0,
}
},
components: {
counter
},
methods: {
handleAdd(num) {
this.count += num; // 接收子组件通过事件总线传来的 num
}
},
// 綁定時放在 created 和 mounted 都可以
created() {
this.$bus.on('add', this.handleAdd); // add 方法是父子组件商量好的命名。
},
// 必須在組件銷毀時解绑
destoryed() {
this.$bus.off('add', this.handleAdd);
}
}
</script>
放一张图(从别人那里偷来的,注明出处:my.oschina.net/u/2518341/b…
父组件 father.vue 给子组件 child.vue 传递 number 数据,子组件通过emit触发add方法,将数据给了eventBus,eventBus作为传话员,在父组件通过on方法绑定add方法时,将数据传给父组件。
(注:此父子组件既可以是真正意义上的父子组件,也可以是爷孙或者是毫不相干的组件等,本例中因为用到了 props,所以是父子组件。