Vue组件间通信（常用+高级用法）

Vue组件通信小总结 组件间通信常用的6种方式1：props2：自定义事件3：全局事件总线4：发布订阅5：vuex6: 插槽slot 其他通信方式(高级用法)事件分类v-modelsync属性attrs与listenerschildern与parent混入mixin作用域插槽

组件间通信常用的6种方式 1：props 父给子（函数），子传父数据父传子数据，子props接收

//数组3种写法：
[‘todos’]
{type:Array}
{type:Array,default:[]} //默认值为空数组

2：自定义事件

子组件 ==》 父组件

$on //监听
$emit //触发

3：全局事件总线

场景适用万能

Vue.prototype.$bus = this

4：发布订阅

需要安装：pubsub.js，react中用得较多
场景适用万能

5：vuex

场景适用万能

6: 插槽slot

父子组件通信——（一般是结构（标签中适用））
默认插槽，具名插槽，作用域插槽

其他通信方式(高级用法) 事件分类 系统事件
click，mouse等自定义事件

关注：事件源，事件类型
注意：
1.原生DOM事件——button绑定系统事件，click等可出发回调

2.组件标签中使用click等，会被视为自定义事件（即点击不起作用，但可以通过click.naitve变成系统事件）
原理：给子组件的根节点绑定了一个系统事件（利用了事件委派）

3.给原生DOM绑定自定义事件——无意义，因为无法触发 $emit

v-model

主要作用：主要结合表单使用，收集表单数据
v-model 是 value 和 input事件的结合

通过 v-model 实现父子组件通信

sync属性

//在使用子组件时，sync相当于给子组件绑定了一个自定义事件
//可以理解为：语法糖
<Child :money.sync="money />

attrs与listeners

$attrs 为组件的一个属性，可以获取父组件传递过来的props数据
子组件如果用props接收了，attrs中就不会有属性（attrs属性捡漏）

$listeners ：与attrs功能类似，为组件实例的属性，可以获父给子传的自定义事件`

<el-button v-bind="$attrs" v-on="$listeners"></el-button>

childern与parent

ref可以获取真实DOM节点，也可以获取子组件的组件标签（ *** 作子组件的数据与方法）
$children 可以获取当前组件的所有子组件实例【以数组形式返回】
$parent 可以获取当前子组件的父组件，可以 *** 作父组件的数据与方法

混入mixin

适用于：
项目中出现很多结构类似的功能，想到组件复用
项目中有很多的组件JS业务逻辑类似，想到mixin
使用方法：类似于封装，然后对外暴露

作用域插槽

子组件数据来源于父组件，子组件不能决定自身外观和结构