Vue父子组件传参-----中央事件总线EventBus

445 阅读1分钟

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,所以是父子组件。