当前位置:   article > 正文

组件间通信(全局事件总线)vue3 --第五节_vue3 全局抛出接收事件

vue3 全局抛出接收事件

上一节提到vue2全局事件总线,由于vue3里面的实例this改了之后,所以不能像vue2那样挂载到vue实例上面,所以我们要借助插件来实现,引入注入到实例上面,用法和vue类似,

首先我们先安装插件 在终端执行命令 npm install --save mitt

然后新建一个js文件 使用然后暴露出去

  1. import mitt from 'mitt'
  2. const bus=mitt()
  3. export default bus

当然可以在用到的组件里面再import,我用的是直接main.js里面全局定义一个$bus方法,

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import {router} from './router/index'
  4. import bus from '@/bus/index'
  5. const Appnew=createApp(App)
  6. Appnew.config.globalProperties.$bus = bus
  7. Appnew.use(router)
  8. Appnew.mount('#app')

然后抛出事件带值的话和之前vue写法一致

  1. <template>
  2. <div>
  3. <h1>这是A组件</h1>
  4. <button @click="toAbus">把“bus传值”传过去</button>
  5. </div>
  6. </template>
  7. <script setup>
  8. import { ref,getCurr
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/795065
推荐阅读
相关标签
  

闽ICP备14008679号