组件化
vue组件系统提供了⼀种抽象，让我们可以使⽤独⽴可复⽤的组件来构建⼤型应⽤，任意类型的应⽤界 ⾯都可以抽象为⼀个组件树。组件化能提⾼开发效率，⽅便重复使⽤，简化调试步骤，提升项⽬可维护 性，便于多⼈协同开发
组件通信常⽤⽅式
props event vuex
⾃定义事件
边界情况 $parent $children $root $refs provide/inject
⾮prop特性
$attrs $listeners
get新技能获取并绑定到当前组件所有特性和事件
v-bind="$attrs" v-on="$listeners" provide/inject
公交总线
Bus类简单实现
兄弟组件传值$parent和$root通讯
大儿子created里面给parent绑定事件
created() {
this.$parent.$on('parentEvent',(data)=>{
console.log(data);
})
},
二儿子里面触发父组件的事件
<button @click="$parent.$emit('parentEvent',msg)">二儿子</button>
$children(子组件排序是随机的，慎用)
⽗组件可以通过$children访问⼦组件实现⽗⼦通信
// parent
this.$children[0].xx = 'xxx
$attrs/$listeners
包含了⽗作⽤域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当⼀个组件没有 声明任何 prop 时，这⾥会包含所有⽗作⽤域的绑定 (class 和 style 除外)，并且可以通过 vbind="$attrs" 传⼊内部组件——在创建⾼级别的组件时⾮常有⽤。
// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>
refs
获取⼦节点引⽤
// parent <HelloWorld ref="hw"/>
mounted() {
this.$refs.hw.xx = 'xxx'
}
provide/inject
能够实现祖先和后代之间传值
// ancestor
provide() {
return {foo: 'foo'}
}
// descendant
inject: ['foo']
插槽
插槽语法是Vue 实现的内容分发 API，⽤于复合组件开发。该技术在通⽤组件库开发中有⼤量应⽤。
匿名插槽
// comp1
<div> <slot></slot> </div>
// parent
<comp>hello</comp>
具名插槽
将内容分发到⼦组件指定位置
// comp2
<div> <slot></slot> <slot name="content"></slot> </div>
// parent <Comp2>
<!-- 默认插槽⽤default做参数 -->
<template v-slot:default>具名插槽</template>
<!-- 具名插槽⽤插槽名做参数 -->
<template v-slot:content>内容...</template> </Comp2>
作⽤域插槽
分发内容要⽤到⼦组件中的数据
// comp3
<div> <slot :foo="foo"></slot> </div>
// parent
<Comp3>
<!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
<template v-slot:default="slotProps">
来⾃⼦组件数据：{{slotProps.foo}}
</template>
</Comp3>
