***父组件---->子组***件
props传值
// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>
// child
props: { msg: String }
ref传值
//parent
this.$refs.hw.foo = "bar";
//或者
this.$children[0].foo = "dong";
//child
//存在this中
--------------------------------
//如果ref传递的是方法
//parent
this.$refs.hw.chilFn('我是父元素传过来的')
//child
'methods': {
chilFn (msg) {
alert(msg)
}
}
子组件---->父组件
自定义事件
//parent
<Com @myevent="onFoo($event)" />
//在方法区,自定义事件绑定的方法
methods: {
onFoo(e) {
console.log("onFoo1");
console.log('e',e);
}
}
//在子组件中,使用$emit触发自定义事件
//第一个参数是自定义的事件名称,第二个参数是自定义触发事件的参数
<div @click="$emit('foo', 'bar')"> 子</div>
兄弟组件通信
// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')
祖先---->后代 通信
//祖先
provide() { return {jay: 'myson'} }
//后代
inject: ['dong'],
任意组件的通信
事件总线 or vuex
// 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(cb => cb(args))
}
}
}
// main.js
Vue.prototype.$bus = new Bus()
// child1
this.$bus.$on('foo', handle)
// child2
this.$bus.$emit('foo')