Vue组件通信7种方式

组件化机制：

vue组件系统提供了⼀种抽象，让我们可以使⽤独⽴可复⽤的组件来构建⼤型应⽤，任意类型的应⽤界 ⾯都可以抽象为⼀个组件树。组件化能提⾼开发效率，⽅便重复使⽤，简化调试步骤，提升项⽬可维护 性，便于多⼈协同开发。
 

常用的组件通信方式：

1、props/emit：父子组件之间的传值

2、$on/$emit：事件总线，任意两个组件之间传值

3、Vuex/localStorage：全局数据管理

4、$parent/$children/$refs：高耦合性，直接访问父子组件实例

5、$attrs/$listeners：除了在props中声明的所有属性/父组件中传递的所有方法

6、provide/inject：祖先组件中声明后，可以传递给所有的后代组件

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

7、插槽：（匿名插槽，具名插槽，作用域插槽）

// comp
<div>
    <slot :foo="foo"></slot>
</div>

// parent
<Comp>
    <!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
    <template v-slot:default="slotProps">
        来⾃⼦组件数据：{{slotProps.foo}}
    </template>
</Comp>