网站首页 > 博客文章 正文
vue2 可以使用$on,$off ,$once 进行组件间通信,虽然不建议使用全局event bus进行组件间通信,但一定情况下还是很方便的
//eventBus.js
const eventBus = new Vue()
export default eventBus
// a.vue
import eventBus from './eventBus'
export default {
mounted() {
eventBus.$on('a-event',
() => { console.log('a') }
)
},
beforeDestroy() {
eventBus.$off('a-event')
}
}
// b.vue
import eventBus from './eventBus'
export default {
methods: {
//b组件调用这个方法时候
//a组件就会打印'a'
call() {
eventBus.$emit('a-event')
}
}
}
但在vue3中已经完全删除了$on, $off ,$once这三个方法
官方推荐使用第三方库 mitt 或者 tiny-emitter
官方给出了vue2升级vue3方案
// eventBus.js
import emitter from 'tiny-emitter/instance'
export default {
$on: (...args) => emitter.on(...args),
$once: (...args) => emitter.once(...args),
$off: (...args) => emitter.off(...args),
$emit: (...args) => emitter.emit(...args)
}
平时项目中我们可以单独使用mitt 还蛮方便的
<script src="./mitt.js"></script>
<script>
var mitt=mitt()
mitt.on('go',function(param){
console.log(param)
})
mitt.on('go',function(param){
console.log('go'+param)
})
</script>
<script>
mitt.emit('go','to')
console.log(mitt)
</script>
看看mitt源码编译成js才几十行
猜你喜欢
- 2024-10-28 功能问题:如何解决跳同一路由组件时页面不变?
- 2024-10-28 Vue3.0来龙去脉更新历程(vue3最新版本)
- 2024-10-28 图解 Vue 异步更新原理(vuex异步)
- 2024-10-28 VUE又要更新了,这框架真这么难学吗?
- 2024-10-28 Vue 3.3.6 发布了,得益于WeakMap,它更快了
- 2024-10-28 新闻在线全栈开发实战(vue3+springboot)之五-数据库信息的更新
- 2024-10-28 vue引入element-ui后界面空白(vue引入elementui不起作用)
- 2024-10-28 VUE3前端开发入门系列教程三:VITE热更新配置及WSL填坑
- 2024-10-28 vue3使用vuex 集中式管理状态数据
- 2024-10-28 移动端跨端方案:4.页面更新机制#前端
你 发表评论:
欢迎- 07-08Google Cloud Platform 加入支持 Docker 的容器引擎
- 07-08日本KDDI与Google Cloud 签署合作备忘录,共探AI未来
- 07-08美国Infoblox与Google Cloud合作推出云原生网络和安全解决方案
- 07-08GoogleCloud为Spanner数据库引入HDD层,将冷存储成本降低80%
- 07-08谷歌推出Cloud Dataproc,缩短集群启动时间
- 07-08Infovista与Google Cloud携手推进射频网络规划革新
- 07-08比利时Odoo与Google Cloud建立增强合作,扩大全球影响力
- 07-08BT 和 Google Cloud 通过 Global Fabric 加速 AI 网络
- 最近发表
-
- Google Cloud Platform 加入支持 Docker 的容器引擎
- 日本KDDI与Google Cloud 签署合作备忘录,共探AI未来
- 美国Infoblox与Google Cloud合作推出云原生网络和安全解决方案
- GoogleCloud为Spanner数据库引入HDD层,将冷存储成本降低80%
- 谷歌推出Cloud Dataproc,缩短集群启动时间
- Infovista与Google Cloud携手推进射频网络规划革新
- 比利时Odoo与Google Cloud建立增强合作,扩大全球影响力
- BT 和 Google Cloud 通过 Global Fabric 加速 AI 网络
- NCSA和Google Cloud合作开发AI驱动的网络防御系统,加强泰国网络空间的安全性
- SAP将在沙特阿拉伯 Google Cloud 上推出BTP服务
- 标签列表
-
- ifneq (61)
- 字符串长度在线 (61)
- googlecloud (64)
- messagesource (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论,来添加一个吧(●'◡'●)