Web前端 ---- 【Vue3】vue3中的组件传值（props、自定义事件、全局事件总线）

前言

props

自定义事件

全局事件总线

安装第三方库mitt

封装event-bus.js文件

使用全局事件总线

清除全局事件绑定

前言

本文介绍在vue3中的组件传值，props、自定义事件以及全局事件总线。相较于vue2中，略有变化。关于vue2中的组件传值看这篇文章

props

在vue3中，父组件给子组件传值使用props同vue2中无变化，相同的用法，在父组件中的子组件身上传递参数，子组件使用props接收

在父组件

在子组件中

那么如何在setup中使用

setup函数有两个参数，

第一个参数就是props

第二个参数是context

context就是组件的上下文

在setup中使用props直接props.属性名即可

自定义事件

自定义事件需要使用到setup的第二个参数，context.

在父组件中，自定义事件名

在子组件中

因为setup中是没有this的，所以使用

context.emit('自定义事件名'，传递的参数)

注意，这里的emit是不需要加$符号的

全局事件总线

vue3中使用全局事件总线是变化最大的。在vue2中，我们在new Vue中在beforeCreate钩子函数中使用vue.prototype.$bus=this来创建全局事件总线。vue3中我需要借助第三方库来完成创建全局事件总线。

安装第三方库mitt

npm i mitt

封装event-bus.js文件

导出mitt

mitt函数会多一个emitter对象，可以当做全局事件总线对象。

使用全局事件总线

在setup中，钩子函数包含六个

onBeforeMount ---- onMounted

onBeforeUpdate ---- onUpdated

onBeforeUnmount ---- onUnmounted

在绑定事件的组件中

引入emitter以及钩子函数onMounted

使用

emitter.on("自定义事件名"，回调函数)

在触发事件的组件中

同样引入emitter

emitter.emit('自定义的事件名'，传递的数据)