组件高级通信、事件注意事项、属性修饰符sync、$ attrs与$ listeners、$children与 $parent、混入mixin【VUE】

1. 组件高级通信

1. props
   适用于的场景：父子组件通信
   注意事项：
   如果父组件给子组件传递数据（函数）：本质其实是子组件给父组件传递数据
   如果父组件给子组件传递的数据（非函数）：本质就是父组件给子组件传递数据
   书写方式：3种

['todos']，{type:Array}，{type:Array, default:[]}

小提示：路由的props
书写形式：布尔值，对象，函数形式

2. 自定义事件
   适用于场景：子组件给父组件传递数据

$on 与 $emit

3. 全局事件总线$bus
   适用于的场景：万能

Vue.prototype. $ bus = this

4. pubsub-js,在react框架中使用的比较多。（发布与订阅）
   适用于场景：万能
5. Vuex
   适用于的场景：万能
6. 插槽
   适用于场景：父子组件通信----（一般结构）
   默认插槽、具名插槽、作用域插槽

2. 事件注意事项：

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

3. v-model【组件通信方式一种】

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

4. 属性修饰符sync【组件通信方式的一种】

可以实现父子组件数据的同步。
:money.sync，代表父组件给子组件传递props【money】；给当前的子组件绑定了一个自定义事件（update:money）

5. $ attrs与$ listeners

• $attrs 属于组件的一个属性，可以获取到父组件传递过来的props数据
  对于子组件而言，父组件给的数据可以利用props接收，但是需要注意的是：如果子组件通过props接收的属性，在 $attrs属性当中是获取不到的。
  注意：“v-bind” 不能使用：进行替换
• $listeners 它也是组件实例自身的一个属性，它可以获取到父组件给子组件传递自定义事件
  注意：“v-on” 不能使用 @ 进行替换

6. $children与 $parent

• ref可以获取真实DOM节点，当然也可以获取子组件标签（操作子组件的数据与方法）
• 组件实例自身拥有一个属性$children，可以获取到当前组件当中全部子组件【返回的是一个数组】
  注意：如果子组件过多，第0项可能不是第一个
• $parent 组件实例属性，可以获取到当前子组件的父组件，进而可以操作父组件的数据和方法

7. 混入mixin

如果项目当中出现很多结构类似的功能，想到组件复用
如果项目当中很多的组件JS业务逻辑相似，想到mixin【可以把多个组件JS部分重复、相似的地方封装成一个混入】

8. 作用域插槽

插槽：可以实现父子组件通信（通信的结构）
默认插槽、具名插槽、作用域插槽
作用域插槽：子组件的数据来源于父组件，子组件是决定不了自身结构与外观