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

目录

前言

props

自定义事件

全局事件总线

安装第三方库mitt

封装event-bus.js文件

使用全局事件总线

清除全局事件绑定


前言

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

props

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

在父组件

Web前端 ---- 【Vue3】vue3中的组件传值(props、自定义事件、全局事件总线)_第1张图片

在子组件中

Web前端 ---- 【Vue3】vue3中的组件传值(props、自定义事件、全局事件总线)_第2张图片

那么如何在setup中使用

setup函数有两个参数,

第一个参数就是props

第二个参数是context

context就是组件的上下文

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

自定义事件

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

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

Web前端 ---- 【Vue3】vue3中的组件传值(props、自定义事件、全局事件总线)_第3张图片

在子组件中

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

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

Web前端 ---- 【Vue3】vue3中的组件传值(props、自定义事件、全局事件总线)_第4张图片

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

全局事件总线

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

安装第三方库mitt

npm i mitt

封装event-bus.js文件

导出mitt

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

Web前端 ---- 【Vue3】vue3中的组件传值(props、自定义事件、全局事件总线)_第5张图片

使用全局事件总线

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

onBeforeMount ---- onMounted

onBeforeUpdate ---- onUpdated

onBeforeUnmount ---- onUnmounted

在绑定事件的组件中

引入emitter以及钩子函数onMounted

使用

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

Web前端 ---- 【Vue3】vue3中的组件传值(props、自定义事件、全局事件总线)_第6张图片

在触发事件的组件中

同样引入emitter

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

Web前端 ---- 【Vue3】vue3中的组件传值(props、自定义事件、全局事件总线)_第7张图片

清除全局事件绑定

清除所有的事件绑定

emitter.all.clear()

清除指定的事件绑定

emitter.off('要清除的事件名')

你可能感兴趣的:(vue,前端,vue.js,javascript)