组件高级通信

组件通信方式:我们已经学习过的组件通信方式6种了

第一种: props
适用于的场景:父子组件通信
注意事项:
如果父组件给子组件传递数据(函数) :本质其实是子组件给父组件传递数据
如果父组件给子组件传递的数据(非函数) :本质就是父组件给子组件传递数据
书写方式: 3种
[ todos ’ ], {type:Array), {type:Array ,default:[]}
小提示:路由的props
书写形式:布尔值，对象、函数形式

第二种:自定义事件
适用于场景:子组件给父组件传递数据
$on与$emit

第三种:全局事件总线$bus
适用于场景:万能
vue. prototype . $bus = this;

第四种: pubsub- js，在React框架中使用比较多。(发布 与订阅)
适用于场景:万能

第五种: Vuex[
适用于场景:万能

第六种:插槽
适用于场景:父于组件通信---- (一般结构)
默认插槽
具名插槽
作用域插槽

1)事件注意事项:
条件:系统事件click、双击、鼠标系列等等
自定义事件

事件源、事件类型、事件回调
1:原生DOM---- button可以绑定系统事件—click单机事件等等
2:组件标签— event1可以绑定系统事件(不起作用:因为属于自定义事-----.native(可以把自定义事件变为原生DOM事件)

2)v-model [组件通信方式一种]
v-model它是Vue框架中指令，它主要结合表单元素起使用(文本框、复选、单选等等)
它主要的作用是收集表单数据
v-model实现原理: value 与input事件实现的，而且还需要注意可以通过v-mode1实现父子组件数据同步。

3)展性修饰符sync [组件通信方式种]
可以实现父子组件数据同步。

:money. ync ,代表父组件给字符串传递props [money] 给当前子组件绑定个自定义事件(update:money)

4)$listeners与$attrs (组件通信方式 一种)
他们两者是组件实例的属性，可以获取到父组件给子组件传递props与自定义事件。

5. $children与$parent
   ref可以获取到某一个组件，子组件
   $children组件实例的属性，可以获取到当前组件的全部子组件[数组]
   $parent组件实例的属性，可以获取到当前子组件的父组件，进而可以操作父组件的数据与方法

6)混入mixin
如果项目当中出现很多结构类似功能，想到组件复用.
如果项目当中很多的组件JS业务逻辑相似，想到mixin. [ 可以把多个组件JS部分重复、相似地方]

7)插槽
插槽:可以实现父子组件通信(通信的结构)
默认插槽
具名插槽
作用域指槽:子组件数据来源于父组件，但是子组件决定不了它的外观与结构