组件化机制:
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>