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调用是肯定拿不到的