vue.js3:用mitt发送接收事件消息(vue@3.2.6 / mitt@3.0.0)
2023-09-14 09:01:18 时间
一,安装mitt库:
1,安装
liuhongdi@lhdpc:/data/vue/storeweb$ npm install -S mitt
2,查看安装后的版本:
liuhongdi@lhdpc:/data/vue/storeweb$ npm list mitt storeweb@0.1.0 /data/vue/storeweb ├─┬ element-plus@1.1.0-beta.7 │ └── mitt@2.1.0 └── mitt@3.0.0
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,js代码
1,封装库:
event/event.js
import mitt from 'mitt' const VueEvent = mitt(); export default VueEvent;
2,发送消息
import VueEvent from '../event/event’
…
//发送消息给navbar,修改navbar的背景色和logo VueEvent.emit("navbarSetting",res.data.setting);
3,接收消息
NavBar.vue
import VueEvent from '@/event/event’
…
setup () { const logoSrc = ref(""); logoSrc.value = sessionStorage.getItem('logoSrc'); onMounted(()=>{ VueEvent.on("navbarSetting", data => { //alert('navbarSetting'); var setting = data; //设置 navbar的背景色 document.body.style.setProperty('--navbar-background', setting.navBarColor); sessionStorage.setItem('logoSrc',setting.logoImageUrl); logoSrc.value = setting.logoImageUrl; }); }); return { logoSrc, } },
三,测试效果
1,未发送消息:
![](https://img2022.cnblogs.com/blog/1938691/202202/1938691-20220219083553947-160953597.png)
2,增加发送消息后:
![](https://img2022.cnblogs.com/blog/1938691/202202/1938691-20220219083554016-430432595.png)
四,查看vue.js的版本:
liuhongdi@lhdpc:/data/vue/storeweb$ npm list vue storeweb@0.1.0 /data/vue/storeweb ├─┬ @vue/cli-plugin-babel@4.5.13 │ └─┬ @vue/babel-preset-app@4.5.13 │ └── vue@3.2.6 deduped ├─┬ element-plus@1.1.0-beta.7 │ └── vue@3.2.6 deduped ├─┬ vue-router@4.0.11 │ └── vue@3.2.6 deduped ├── vue@3.2.6 └─┬ vue3-carousel@0.1.27 └── vue@3.2.6 deduped
相关文章
- vue引入jQuery[通俗易懂]
- 如何查看Vue项目vue的版本号
- 请简述什么是Vue组件化开发_vue组件化开发
- Vue中NProgress进度条使用教程
- 如何修复vue-cli保存编译时的eslint报错
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- vue源码分析-动态组件
- vue源码分析-从new Vue开始
- vue.js中实现阻止事件冒泡
- vue.js和jquery的区别_人和人类的区别是什么
- VUE分页出现省略号
- Vue调试工具安装(vue devtools)
- 常考vue面试题(附答案)
- Vue中websocket的使用方法
- vue中基本事件的处理 ?
- Vue 快速入门(一)
- 【Vue】1524- 分享 22 道常被问及的 JavaScript 面试题
- Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能
- Vue如何连接Redis数据库(vue怎么连接Redis)
- 使用Vue从Redis获取数据(vue去redis取数据)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)