组件通讯的方法

派发与广播

broadcast(eventName, value) {
    // // 获取当前组件下的所有孩子
    const broadcast = (children) => {
        children.forEach((child) => {
            child.$emit(eventName, value)
        if (child.$children) {
            broadcast(child.$children)
            }
        })
    }
}

向下传递所有属性

// $attrs 表示属性的集合
// $listeners 表示方法的集合
// v-bind 绑定所有的属性 v-bind="$attrs" {...{props: $attrs}}
// v-on 绑定方法 v-on="$listeners"  on={{on: $listener}}

inheritAttrs: false 不继承，添加的属性不在dom节点上显示

provide inject

// 上级组件
provide(){}
return {parent: this}

// 下级组件
inject: ['parent']

ref

• ref 可以用在dom元素上 获取的是dom节点
• 用在组件上，可以获取当前组件实例

eventBus

// 全局定义用了一个bus, 空的vue实例 有$on $emit 的方法 
const bus = new Vue()
// 在组件一中定义
 this.bus.$on('updateData', this.getdata);
// 组件二中使用
this.bus.$emit('updateData', {loading: false});

// 注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况
beforeDestroy () {
        this.bus.$off('updateData', this.getData);
    }