vue通过封装$on定义全局事件

我们先在vue项目的src跟目录下创建一个文件夹 叫 utils
下面创建一个js文件夹 叫 bus.js
参考代码如下

import Vue from "vue";
export default new Vue();

然后 我们就可以来用了

在需要定义事件的组件中编写

<template><div><h1>Hello world!</h1></div>
</template><script>
import Bus from '@/utils/bus';
export default {mounted() {Bus.$on('csonldom',(dom)=>{console.log("全局事件输出",dom);})},methods: {}
}
</script>

然后 在需要使用这个方法的组件中调用

<template><div><button @click = "startScanner">触发全局事件</button></div>
</template><script>
import Bus from '@/utils/bus';export default {data() {return {}},methods: {startScanner() {Bus.$emit('csonldom', "小猫猫");}}
}
</script>

需要注意的是
首先 你要
Bus.$on{(}^{\prime }方法{名}^{\prime },(dom)=>//方法体)这个要定义了你用Bus.$emit(‘方法名’, 方法参数);
才能调用
如果声明的语句还没有执行 你直接通过Bus调用是肯定拿不到的