vue事件总线废除了吗
vue3取消了全局事件总线,废除原因是安全性低。全局事件总线是一个全局任意组件通信技术,即任意组件间的通信均可实现。在vue3中,如果想要使用全局事件总线,需要引入第三方库mitt或tiny-emitter。
vue3取消了全局事件总线,原因是安全性低。
vue的全局事件总线
全局事件总线,是一个全局任意组件通信技术。
顾名思义,任意组件间通信,均可实现。
它通信是通过一个傀儡去实现的,一个所有组件均可访问到的傀儡,vue中命名叫 $bus
在vue2中
我们可以直接在 入口文件 mian.js 中使用生命周期钩子 beforecreated
直接创建 $bus
beforeCreate() {
Vue.prototype.$bus = this
}
记得把钩子写在 挂载之前
即可。
使用时:
-
在需要接收数据的组件中使用
mounted
钩子绑定事件监听
mounted() {
this.$bus.$on('hello',(data) => {
console.log(data);
})
},
-
在需要发送数据的组件中需要发送的操作中触发该方法即可
methods: {
sendStudentName(){
this.$bus.$emit('hello',this.name)
}
},
-
还没完,如果组件销毁,记得解绑事件,在哪绑定就在哪解绑,使用
beforeDestroy
钩子
beforeDestroy() {
this.$bus.$off('hello')
},
在vue3
在vue3中,取消了全局事件总线,如果想要使用,我们需要引入第三方库 mitt
或tiny-emitter
1、安装mitt库
npm i mitt -s
2、在根目录封装一个 js 文件,以便组件中导入使用
文件起名最好见名知义 例如 eventBus.js
内容:
//导入
import mitt from 'mitt';
//定义,定义也最好见名知义
const emitter = mitt();
//暴露
export default emitter;
3、使用
1)相互通信的组件均需要导入js
import emitter from '../../eventBus'
2) 接收数据的组件 在setup()
中绑定事件监听
setup(){
emitter.on('event',(info) => {
...
})
return{}
}
这里的箭头函数,换成普通函数也可
3)发送数据的组件触发即可传递数据
setup(){
function send(info) {
emitter.emit('event',info)
)
return{}
}
4)组件销毁前,解绑事件,
onBeforeUnmount(()=>{
emitter.off("event", onEvent);
})
如果使用普通函数,则把该函数也在第二个参数的位置,如果是箭头函数,则不用写。如上 onEvent
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbjijf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01