vue 组件传值 通信常用方式

父组件 => 子组件

• 属性props

	// child
	prop:{msg:String}
	// parent
	<helloWord msg="helloword"/>

• 引用refs

	// parent
	<helloWord ref='hw' msg="helloword"/>
	this.$refs.hw.xx

子组件 =>父组件 : 自定义事件

	this.$emit('add',good)
	// parent
	<hellorWrod @add='add($event)'/>

兄弟组件 => 通过共同祖辈组件

	// 通过共同的祖辈组件搭桥
	// brother1
	this.$parent.$on('foo',handle)
	// brother2
	this.$parent.emit(foo)

祖先和后代之间传值

• provide/inject：能够实现祖先给后代传值

//	ancestor 
	provide(){
		return {
			hello:this
		}
	}
	// descendant 
	inject:['hello']

• dispatch: 后代给祖先传值

	// 定义一个dispatch方法指定要派发的数据名称和数据
	function dispatch(eventName,data){
		let parent = this.$patent
		// 循环查找父元素  只要还存在就继续找
		while(parent){
		// 
		parent.$emit(eventName,data)
		parent = this.$patent
	}
}
// 使用，HelloWorld.vue
 <h1 @click="dispatch('hello', 'hello,world')">{{ msg }}</h1>
 
//App.vue
 this.$on('hello', this.sayHello)

任意两个组件之间: 事件总线或者vuex

• 事件总线：创建一个Bus类负责事件派发、监听和回调管理

	// Bus 事件派发和监听回调管理
	class Bus {
		constructor(){
			this.callbacks = {}
		}
		$on(name,fn){
			this.callbacks[name] = this.callbacks[name]||[]
			this.callbacks[name].push(fn)
		}
		$emit(name,args){
			if(this.callbacks[name]){
				this.callbacks[name].forEach(cb =>cb(args))
			}
		}
	}
	// main.js
	 Vue.prototype.$bus = new Bus()
 
 	// child1
 	 this.$bus.$on('foo', handle)

	// child2
 	this.$bus.$emit('foo')

• vuex：创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更