@文心快码vue3使用全局事件总线 文心快码 在Vue 3中使用全局事件总线进行组件间通信是一个简单而有效的方法,特别是在处理没有直接父子关系的组件通信时。下面我将根据提供的tips,详细解释如何在Vue 3中使用全局事件总线。 1. 创建全局事件总线实例 在Vue 3中,推荐使用mitt库来创建全局事件总线实例,因为它轻量且性能优越。首先,需
vue3取消了全局实例的$on,$off,所以可以借助轻量Mitt库实现200bytes轻量库,进行组件通信,可以跨平台使用,支持批量监听和批量移除。以下为vue3+ts项目中使用Mitt的方法import { createApp } from 'vue' import App from './App.vue' import mitt from "mitt"; const Mit = mitt() // TypeScript注册,必须...
4. <template><User></User></template>// 导入全局事件总线对象importemitterfrom"./utils/event-bus.js";importUserfrom'./components/User.vue';// 引入组合式API生命周期钩子函数import{onMounted}from"vue";exportdefault{components:{User},name:"App",setup(){// 导入生命周期mountedonMounted(()=>{emit...
但又想使用全局事件总线,所以就会了解到一个相当于vue2的Vue.Property的一个配置项叫做app.config.globalProperties,但是当我们往其身上挂载this或createApp({})时又会发现,其身上很干净,没有 $ on,他的 $emit也发生了改变无法使用,那么我们可以使用第三方库mitt,官方推荐方法:...
方式一:创建一单独文件,在文件中创建事件总线对象并对外暴露,在使用事件总线的地方导入(比如vue组件中) 第一步:创建EventBus.ts 文件 第二步:在组件中导入并使用 打印结果: 方式二:全局挂载 vue2 中使用Vue.prototype将全局属性挂载到vue的原型对象上,应用内所有组件都可以访问 ...