vue 多层级父子组件通信

stateDiagram-v2
[*] --> Parent组件
Parent组件 --> Son组件
Son组件--> Cpn组件

当多层级父子组件通信时，通过props/$emit一层一层通信太麻烦

方法：

1. provide inject

// Parent组件
name: "parent"，
provide: {
    user: '小花'
}
-----------------------------------------------------------------------
// Cpn组件
name: "Cpn",
inject: ['user']

// 注意：当provide要访问组件实例属性时，provide是函数，它返回的是对象
provide() {
    return {
        ...
    }
}

默认情况下，provide/inject 绑定并不是响应式的

官网：v3.cn.vuejs.org/guide/compo…

2. v-bind="$attrs" isInheritAttrs: false

// Parent组件
<Son @xxx="xxx" />

name: "Parent",
methods: {
    xxx() {
        ...
    }
}
-----------------------------
// Son组件
<Cpn v-bind="$attrs" />

name: "Son",
// 必须设置此属性
isInheritAttrs: false
-----------------------------
// Cpn组件
name: "Cpn",
methods: {
    xxx() {
        this.$emit('xxx');
    }
}

3. 全局状态管理 vuex
4. 使用事件总线 (官网指明 在大多数情况下，不鼓励使用全局的事件总线)