在 Vue.js中优雅地使用全局事件的方法

在 Vue.js 中，全局事件可以在不同组件之间传递信息。但是如果使用不合适，会导致代码变得混乱和难以维护。下面让我们看一下如何优雅地使用 Vue.js 中的全局事件。

什么是全局事件

在 Vue.js 中，我们可以使用自定义事件系统来在不同组件之间传递信息。在根组件中使用 $emit 方法触发自定义事件，在其他组件中使用 $on 监听自定义事件。

全局事件也是一种自定义事件，与局部自定义事件不同的是，它是在 Vue 的全局对象上触发和监听。全局事件的优势在于可以跨越多个组件来进行数据传递，但是需要注意在适当的时机进行触发和监听。

如何使用全局事件

在 Vue.js 中，我们可以使用 Vue.prototype 来将一个函数或一个对象添加到 Vue 的原型上。这样我们就可以在任意组件中使用这个函数或对象。

在应用中使用全局事件的方法如下：

1. 在 main.js 文件中添加全局事件的代码。可以使用 Vue.prototype 来添加全局事件的方法。

// main.js
import Vue from 'vue'

Vue.prototype.$globalEventBus = new Vue()

这里我们创建了一个事件总线 globalEventBus 并添加到了 Vue 的原型上。这样我们就可以在任意组件中使用 this.$globalEventBus 来触发和监听全局事件了。

1. 在组件中使用全局事件。可以在 Vue 组件的 created 钩子函数中添加监听事件，也可以在需要触发全局事件的方法中使用 $emit 方法触发事件。例如：

// componentA.vue
<template>
  <div>
    <h2>Component A</h2>
    <button @click="$emit('myEvent')">触发事件</button>    
  </div>
</template>

<script>
export default {
  created () {
    this.$globalEventBus.$on('myEvent', () => {
      console.log('收到事件')
    })
  }
}
</script>

在这个例子中，我们在 ComponentA 中添加了一个 button，并使用 $emit 方法触发了一个名为 myEvent 的事件。在 created 钩子函数中使用 $on 方法监听了 myEvent 事件。当事件被触发时，回调函数中的 console.log 将会输出 "收到事件" 字符串。

// componentB.vue
<template>
  <div>
    <h2>Component B</h2>
    <button @click="$globalEventBus.$emit('myEvent')">触发事件</button>    
  </div>
</template>

<script>
export default {}
</script>

在这个例子中，我们在 ComponentB 中添加了一个 button，并使用 $emit 方法触发了一个名为 myEvent 的全局事件。这个事件可以被所有监听了此事件的组件接收。

示例说明

在以下例子中，我们将使用全局事件进行两个组件之间的通讯。

示例 1: 父子组件之间传递信息

在父组件 Parent 中，我们可以使用 $emit 方法触发一个名为 change-color 的自定义事件，并将需要改变颜色的值作为参数传递给子组件 Child。

// Parent.vue
<template>
  <div>
    <Child :color="color" @change-color="changeColor"></Child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue'

export default {
  data () {
    return {
      color: 'red'
    }
  },
  components: {
    Child
  },
  methods: {
    changeColor (newColor) {
      this.color = newColor
    }
  }
}
</script>

在子组件 Child 中，我们使用 $emit 方法触发了父组件 Parent 中的 change-color 自定义事件，并将需要改变的颜色作为参数传递给父组件。

// Child.vue
<template>
  <div>
    <button @click="change('green')">Change to Green</button>
    <button @click="change('blue')">Change to Blue</button>
  </div>
</template>

<script>
export default {
  props: ['color'],
  methods: {
    change (newColor) {
      this.$emit('change-color', newColor)
    }
  }
}
</script>

在这个例子中，我们使用了父子组件的嵌套组合，并用自定义事件进行信息的传递。

示例 2: 兄弟组件之间传递信息

在组件 ComponentA 中点击按钮可以触发全局事件 myEvent，并将需要传递的数据作为参数传递给其他注册了全局事件 myEvent 的组件，例如组件 ComponentB。

// ComponentA.vue
<template>
  <div>
    <h2>Component A</h2>
    <button @click="sendMsg">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMsg () {
      this.$globalEventBus.$emit('myEvent', 'Hello World')
    }
  }
}
</script>

在组件 ComponentB 中使用 $on 方法来监听全局事件 myEvent，并将传递过来的数据作为回调函数的参数进行处理。

// ComponentB.vue
<template>
  <div>
    <h2>Component B</h2>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  created () {
    this.$globalEventBus.$on('myEvent', (data) => {
      this.msg = data
    })
  }
}
</script>

在这个例子中，我们使用了全局事件进行组件之间的信息传递。无论这两个组件的父级组件结构如何，我们都可以使用全局事件进行信息的传递。