组件间通信（全局事件总线）vue3 --第五节

最新推荐文章于 2024-11-27 15:09:37 发布

代码小爽

最新推荐文章于 2024-11-27 15:09:37 发布

阅读量507

点赞数

分类专栏：通信 vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_51034048/article/details/127814161

版权

本文介绍了在Vue3中如何实现组件间的通信，由于Vue3实例的改变，不能像Vue2那样使用全局事件总线。通过引入mitt插件并将其注入到实例中，实现与Vue2类似的事件发布与订阅方式。在main.js中全局定义$bus，详细讲解了事件的抛出、接收及页面显示的方法。

摘要由CSDN通过智能技术生成

上一节提到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

最低0.47元/天解锁文章