父组件=>子组件：
- 属性props
//child
props:{msg:String}
//parent
<HelloWorld msg="Hello World"/>
- 引用refs
//parent
<HelloWorld ref="hw"/>
this.$refs.hw.xx
子组件=>父组件：自定义事件
//child
this.$emit('add', good)
//parent
<Cart @add="cartAdd($event)"></Cart>
兄弟组件：通过共同祖辈组件
通过共同的祖辈组件搭桥，root。
//brother1
this.$parent.$on('foo', handle)
//brother2
this.$parent.$emit('foo')
祖先和后代之间
- provide/inject：能够实现祖先给后代传值
//祖先
provide(){
return {foo:'foo'}
}
//后代
inject:['foo']
- dispatch：后代给祖先传值
//定义一个dispatch方法，指定要派发事件名称和数据
function dispatch(eventName,data){
let parent=this.$parent
//只要还存在父元素就继续往上查找
while(parent){
//父元素用$emit触发
parent.$emit(eventName,data)
//递归查找父元素
parent=parent.$parent
}
}
//后代
<h1 @click="dispatch('hello', 'hello,world')">{{msg}}</h1>
//祖先
this.$on('hello', this.sayHello)
任意两个组件之间：事件总线或vuex
- 事件总线：创建一个Bus类负责事件派发、监听和回调管理
//Bus：事件派发、监听和回调管理
class Bus{
constructor(){
//{
// eventName1: [fn1,fn2],
// eventName2: [fn3,fn4],
//}
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(cd => cd(args))
}
}
}
//main.js
vue.prototype.$bus = new Bus()
//child1
this.$bus.$on('foo', handle)
//child
this.$bus.$emit('foo')
- vuex：创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更
