VUE组件通信——2022.07.22

组件通信方式（6种）：

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

第二种：自定义事件
适用于场景：子组件给父组件传递数据

$on与$emit

第三种：全局事件总线$bus
适用场景：万能

   Vue.prototype.$bus = this;

第四种：pubsub-js，在react框架中使用比较多，在Vue中不常用。（发布与订阅）
适用场景：万能

第五种：Vuex
适用场景：万能

第六种：插槽
适用场景：父子组件通信—一般是结构
默认插槽
具名插槽
作用域插槽

PS：

1）事件注意事项
事件：
系统事件：click、双击、鼠标系列等等
自定义事件
事件源、事件类型、事件回调

1、原生的DOM --- button可以绑定系统事件 --- click单击事件等
2、组件标签 --- event1可以绑定系统事件，但是不起作用，但是 @click.native 可以把自定义事件变为原生的DOM事件，当前的原生DOM的click事件（事件委派）

2）v-model
v-model是Vue框架中指令，主要结合表单元素一起使用（文本框、复选、单选等）
Vue2：可以通过value与input事件实现v-model功能

v-model实现原理：value与input事件实现的，而且还需要注意可以通过v-model实现父子组件数据同步

3）sync属性修饰符【组件通信方式的一种】
实现父子组件数据同步
:money.sync，代表父组件给字符串传递props【money】给当前子组件绑定一个自定义事件(update:money)

4）$attrs与$listeners：组件实例属性，可以获取到父组件给子组件传递的props

  $attrs属于组件的一个属性，可以获取到父组件传递给子组件的props数据

    对于子组件而言，父组件给的数据可以利用props接受，但是需要注意，如果子组件通过props接受的属性，在$attrs属性中是获取不到的（这种写法不可用 : 代替v-bind）

    $listeners 也是组件实例自身的一个属性，可以获取到父组件给子组件传递的自定义事件（这种写法不可用 @代替v-on）

5）$children与$parent
ref哭获取真实的DOM节点，当然也可以获取子组件标签（操作子组件的数据与方法）
在Vue组件当中可以通过ref获取子组件，就可以操作子组件数据与方法

    $children：组件实例自身拥有的一个属性，可以获取到当前组件中全部的子组件。
    $parent：在子组件中获取到父组件，可以操作父组件的数据和方法

6）混入mixin
如果项目中有很多结构功能类似，使用组件
如果项目中很多业务逻辑相似，可以使用mixin【把多个组件JS部分共用】

7）作用域插槽scope-slot
实现父子组件通信（通信的结构）
默认插槽
具名插槽
作用域插槽：子组件的数据来源于父组件，子组件时决定不了自身的结构与外观【子组件把数据回传给父组件，父组件利用scope-slot接收显示数据】