这里我使用是vue-cli3.3版本以上创建的脚手架
不知道查看vue-cli版本的 在命令行中输入 vue -V 这里是大写的 V
@vue/cli 4.1.2 这是笔者的@vue/cli 版本 vue-cli在3.*版本后变成了 @vue/cli
咱回归正题
1.在src文件建立一个 util文件 创建一个 bus.js文件
import Vue from "vue"
export default new Vue();
2.引入使用 有俩种方式
一种在各自组件中引入使用 一种是注册在Vue实例的原型对象中
我们来一一讲解
2.1在各自组件中使用
2.1.1.在a组件中
<button @click="passMsg">非父子传参方式</button> // 页面上书写一个按钮进行触发事件
在script 标签中 引入 bus.js文件
import bus from "./util/bus.js"
创建一个方法 Vue实例中有一个$emit方法 第一个是事件名称,第二个参数是 传递的参数 这里我传递了一个字符串
passMsg(){bus.$emit('msg','i am from brother components!')}
2.2.2.在b组件中 进行接收
还是先引入 bus文件
import bus from "./util/bus.js"
接受也有俩种方式
第一种
bus.$on('msg',(val)=>{this.msg=val}) //第一个参数是 事件名称 第二个参数是一个回调函数
第二种
mounted(){ //有些时候事件是在组件挂载的时候触发的 所以我在挂载的时候进行监听，当然也看具体的情况
bus.$on('msg',this.getMsg.bind(this)) // 这里使用bind进行绑定已有的函数 更改this指向 默认的回调函数中的this指向window 这下大家可能明白为啥我上面使用的是箭头函数吧
},
methods:{
getMsg:function(text){
this.msg=text;
}
}
2.2，在vue实例中注册使用
在main.js文件中引入
import bus from "./util/bus.js"
Vue.prototype.$bus=bus; //在实例中注册使用 这下所有的vue组件都可以使用了
2.2.1 在a组件中
passMsg(){ this.$bus.$emit('msg','i am from brother components!')}
2.2.2 在b组件中
mounted(){ this.$bus.$on('msg',(val)=>{this.msg=val;}) }
3.总结
综上考虑 最后感觉最好的引入方式 还是 注册在Vue的实例中使用着方便
import bus from "./util/bus.js"
Vue.prototype.$bus=bus
同时事件监听这块,使用箭头函数也方便
this.$bus.$on('event',(val)=>{console.log(val)})
当然这些都是仁者见仁智者见智,
最后还是 武汉加油 中国加油 祝愿疫情早点过去 173 173 173
