【前端Vue事件】如何监听原生组件的点击事件？事件总线的使用

1. .native修饰符什么时候使用？

1. 在我们需要监听一个组件的原生事件的时候，必须给对应的事件 添加上 .native修饰符，才能进行监听。

2. Vue 中的事件总线 $bus 的使用

1. 当面临非父子组件之间的通信的时候，可以使用 Vue的事件总线进行组件之间的通信。

2.1 事件总线使用步骤

1. 在main.js中对 $bus进行挂载：

Vue.prototype.$bus = new Vue()

2. 在 组件中发送一个事件:

/**
       * 处理图片加载的事件
       * */
      imageLoad() {
        // 这里的$bus 事件总线需要在Vue 原型上进行挂载
        // Vue.prototype.$bus = new Vue()
        this.$bus.$emit('itemImageLoadEvent')
        // 在在使用的组件中进行监听该事件
      }

3. 在使用该组件的组件中对该事件进行处理:

this.$bus.$on('itemImageLoadEvent', function () {
          // 业务逻辑
 })