前言
组件之间为什么要进行通讯?如果组件是一个一个螺丝钉,我们通常会使用螺丝钉搭建我们的页面,设定一个场景,假如我们创建一个按钮组件,设置喜欢的样式,大小,颜色和形状等等,但是又想复用这个按钮,这时候不能每种都写一个组件叭,所以就需要我们将会变化的参数作为入口,在使用的时候把我们需要的大小,颜色值传入这个入口,然后通过通讯传给组件,组件收到之后就会按照设定的方式进行设定然后展示,通过传入不同的值呈现不同的效果.同样的如果我们需要子组件触发事件交给父组件完成,这时候也需要通讯
方式(vue3语法)
父传子props子传父$emit
props
$emit
传属性$attrs传事件$listeners
vue3将属性和事件都放在了$attrs里
事前注入provide事后使用inject
provide
inject
Vuex
这个查看官网文档,可以用于非父子之间的通信,即任何两个组件的通讯都可以,
事件总线EventBus
和vuex很像,也是独立出一个JS文件,储存需要的属性和方法,然后需要使用的组件进行引入和使用即可.这种也有第三方的库,已经写好了逻辑,我们直接安装(npm)即可以直接使用.
第三方的库
使用第三方的库帮助我们实现
总结
- 父子组件的通信可以使用props,$emit或者是$attrs
- 祖孙之间的通信可以使用provide/inject
- 像是毫无关系的组件或者兄弟组件想要通信那么可以使用vuex或者自己写一个事件总线或者导入第三方已经支持的
- vue3相对vue2处理有点不一样,以setup语法糖为例,
defineProps({})
定义propsdefineEmits
定义事件,this通过获取实例getCurrentInstance
然后解构赋值获取第二个参数,包含了$attrs,里面定义了属性和方法;provide
inject
都成vue里直接引入然后定义provide()
获取inject('')