vue组件间的通讯方式

前言

组件之间为什么要进行通讯?如果组件是一个一个螺丝钉,我们通常会使用螺丝钉搭建我们的页面,设定一个场景,假如我们创建一个按钮组件,设置喜欢的样式,大小,颜色和形状等等,但是又想复用这个按钮,这时候不能每种都写一个组件叭,所以就需要我们将会变化的参数作为入口,在使用的时候把我们需要的大小,颜色值传入这个入口,然后通过通讯传给组件,组件收到之后就会按照设定的方式进行设定然后展示,通过传入不同的值呈现不同的效果.同样的如果我们需要子组件触发事件交给父组件完成,这时候也需要通讯

方式(vue3语法)

父传子props子传父$emit

props

$emit

传属性$attrs传事件$listeners

vue3将属性和事件都放在了$attrs里

事前注入provide事后使用inject

provide

inject

Vuex

开始 | Vuex

这个查看官网文档,可以用于非父子之间的通信,即任何两个组件的通讯都可以,

事件总线EventBus

和vuex很像,也是独立出一个JS文件,储存需要的属性和方法,然后需要使用的组件进行引入和使用即可.这种也有第三方的库,已经写好了逻辑,我们直接安装(npm)即可以直接使用.

第三方的库

使用第三方的库帮助我们实现

总结

1. 父子组件的通信可以使用props,$emit或者是$attrs
2. 祖孙之间的通信可以使用provide/inject
3. 像是毫无关系的组件或者兄弟组件想要通信那么可以使用vuex或者自己写一个事件总线或者导入第三方已经支持的
4. vue3相对vue2处理有点不一样,以setup语法糖为例,defineProps({})定义propsdefineEmits定义事件,this通过获取实例getCurrentInstance然后解构赋值获取第二个参数,包含了$attrs,里面定义了属性和方法;provideinject都成vue里直接引入然后定义provide()获取inject('')