vue2和vue3的全局事件总线
vue2里面的全局事件总线1,在main.js文件里面调用生命周期函数beforeCreate在new.Vue实例中....beforeCreate(){Vue.propotype.$name = this //这个name是可以随便更改的,可以使用你想用的名字....2,在组件1中的methods创建一个函数调用,或者说在mounted里面直接调用,都可以this.$name.$emit('a'
·
vue2里面的全局事件总线
1,在main.js文件里面调用生命周期函数beforeCreate
在new.Vue实例中
....
beforeCreate(){
Vue.propotype.$name = this //这个name是可以随便更改的,可以使用你想用的名字
....
2,在组件1中的methods创建一个函数调用,或者说在mounted里面直接调用,都可以
this.$name.$emit('a','我是要在组件2显示的值')
这里是使用你的全局事件总线 name 是使用 emit 触发事件 a ,这边第二个值就是你想要传输的值,也可以使用你双向绑定的值
3,在组件2中,使用mounted函数$on进行监听
this.$name.$on('a',(data)=>console.log(data)
组件2第二个值是一个函数,data的值就是组件1传过来的值,直接可以打印
vue3中,取消了全局事件总线,如果想要使用全局事件总线,那么就需要使用一个插件mitt
我这里使用的是mitt@3.0.0,工具是vscode
1,首先安装mitt
npm i mitt -s
2,安装完成后,根目录新建一个文件夹mitt,创建一个文件叫event.js
文件内容如下:
import mitt from 'mitt'
const emitter = mitt();
export default emitter
3,在组件1和组件2分别引入 emitter
import emitter from '你创建event的地址'
4,vue3中的函数可以直接写在setup内部,所以组件2写法如下
export default{
...
setup(){
emitter.on('edit',()=>{})
return{}
}
这里监听的方法
5,触发
export default{
...
setup(){
emitter.emit('edit','我是想要传的值')
return{}
}
这样就借用插件实现了vue3的全局事件总线
更多推荐
已为社区贡献7条内容
所有评论(0)