vue组件之间通信

一、父子组件之间通信

a. 父组件 ==》 子组件

1. 通过props属性进行传递

//child
props: { 
    info: {   
        type: String
    }
}

//parent
<child info="hello world" ></child>

2. 通过refs引用

//parent
<child refs="child"></child>
this.$refs.child.xxx

b. 子组件 ==》 父组件

//child 
this.$emit('test', 'hello');

//parent
<child @test="testEvent"</child>

二、兄弟组件之间通信

通过共同祖辈搭桥实现通信(\$parent / \$root)

//child1
this.$parent.$emit('add', 'hello');
//this.$root.$emit('add', 'hello');

//child2
this.$parent.$on('add', add);
//this.$root.$on('add', add);

三、祖先与后代之间通信

a. 祖先 ==》 后代

通过provide和inject进行传值

//ancestor(祖先)
provide() {
	return {
		foo: 'foo'
	};
}

//descendant(后代)
inject: ['foo']

b. 后代 ==》 祖先

通过dispatch方法进行消息派发

// descendant(后代)
<p @click="dispatch('add', 'hello')"></p>

//ancestor(祖先)
this.$on('add', this.add);

//dispatch 的简要实现
function dispatch (eventName, data) {
	let parent = this.$parent;
	while(parent) {
		parent.$emit(eventName, data);
		parent = parent.$parent;
	}
}

四、任意两个组件之间通信

通过事件总线或者vuex

//事件总线: 通过BUS类负责事件的派发、监听和回调管理
//main.vue
export defaule new Vue();

//child1.vue
import Bus from ./main.vue;
Bus.$emit('add', 'hello');

//child2.vue
import Bus from ./main.vue;
Bus.$on('add', this.add);

// Bus类的简要实现
class Bus {
	constructor () {
		this.eventCb = {};
	}
	$emit (name, arg) {
		//发送事件后，寻找该事件对应的处理函数，并执行处理函数
		if (this.eventCb[name]) {
			this.eventCb[name].forEach( cb => cb(arg) )
		}
	}
	$on (name, cb) {
		//一个事件名可以绑定多个处理函数,在监听事件的时候处理函数与事件进行绑定
		this.eventCb[name] = this.eventCb[name] || [];
		this.eventCb[name].push(cb);
	}
}