赞
踩
上一节提到vue2全局事件总线,由于vue3里面的实例this改了之后,所以不能像vue2那样挂载到vue实例上面,所以我们要借助插件来实现,引入注入到实例上面,用法和vue类似,
首先我们先安装插件 在终端执行命令 npm install --save mitt
然后新建一个js文件 使用然后暴露出去
- import mitt from 'mitt'
- const bus=mitt()
- export default bus
当然可以在用到的组件里面再import,我用的是直接main.js里面全局定义一个$bus方法,
- import { createApp } from 'vue'
- import App from './App.vue'
- import {router} from './router/index'
- import bus from '@/bus/index'
-
- const Appnew=createApp(App)
- Appnew.config.globalProperties.$bus = bus
- Appnew.use(router)
- Appnew.mount('#app')
然后抛出事件带值的话和之前vue写法一致
- <template>
- <div>
- <h1>这是A组件</h1>
- <button @click="toAbus">把“bus传值”传过去</button>
- </div>
- </template>
-
- <script setup>
- import { ref,getCurr
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。