Vue组件通信小总结
组件间通信常用的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
使用方法:类似于封装,然后对外暴露
作用域插槽
子组件数据来源于父组件,子组件不能决定自身外观和结构