vue3.0项目中使用mitt进行组件传值

一、安装依赖mitt

npm install mitt

二、导出模块mitt

在src目录下创建utils文件夹，在该文件夹下创建mybus.ts文件

import mitt from 'mitt';
const mitter = mitt();const bus: any = {$emit: mitter.emit,$on: mitter.on,$off: mitter.off
}
export {bus
}

三、在main.ts 中引入

import { createApp } from 'vue'
import App from './App.vue'
import { bus } from "./utils/mybus"const app = createApp(App)
app.config.globalProperties.$bus = bus

四、在项目中使用

这里要用到proxy，我们可以提前封装一下兼容ts的写法
在src/utils目录下创建useCurrentInstance.ts文件：

import { ComponentInternalInstance, getCurrentInstance } from 'vue'
export default function useCurrentInstance(): any {const { appContext } = getCurrentInstance() as ComponentInternalInstanceconst proxy = appContext.config.globalPropertiesreturn {proxy}
}

然后再需要使用的页面：

import useCurrentInstance from '@/utils/useCurrentInstance'
const { proxy } = useCurrentInstance()//发送
proxy.$bus.$emit('currentRoute', item) //发送当前路由信息//接受proxy.$bus.$on('currentRoute', (item: RouteRecordRaw) => {  //RouteRecordRaw是当前路由对象类型，可从vue-router中取console.log(item, '监听点击menu时传到父组件的数据')})

vue3.0项目中使用mitt进行组件传值相关推荐

TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的语 ...
在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
Vue3+TS项目中element-plus自动导入组件后，找不到文件
问题原因从报错代码来看,这是一个ts错误,而且是找不到名称是没有将*.d.ts文件加入到tsconfig.json配置文件中,所以Typescript还不认识它们解决 //找到项目根目录下 t ...
创建VUE项目，vue-cli2.0版本和3.0版本的区别，将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目使用vue-cli2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用v ...
认识vue3.0项目的目录结构
上一篇笔记新建一个vue3.0项目新建项目后,用vscode打开,会看到项目目录,如下图来看看我们新建的项目里有哪些内容 node_modules npm 加载的项目依赖模块 public 用于 ...
vue3.0项目实战 - ElementUI框架版
系列文章目录第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑实现 vue-cli2和vue-cli3同时并存及常见命令第三章 vue3.0项目实战 - Ele ...
【Vue】Docker + Nginx 部署 Vue3.0 项目
Docker + Nginx 部署 Vue3.0 项目 1.用指令 npm run build 打包vue.js项目(该项目是在WebStorm里面新建的Vue空项目). 打包成功后,会生成一个目录d ...
vue3.0项目创建
vue3.0项目创建可视化创建(手脚架) 命令行创建可视化创建(手脚架) 1.win+R打开cmd命令行 2.输入vue ui 打开手脚架 vue ui 3.打开项目管理器,选择创建 4.选择项目 ...
vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...

vue3.0项目中使用mitt进行组件传值

一、安装依赖mitt

二、导出模块mitt

三、在main.ts 中引入

四、在项目中使用

vue3.0项目中使用mitt进行组件传值相关推荐

最新文章

热门文章