Vue组件的自定义事件和全局事件总线

段落一：Vue组件中的自定义事件。 在Vue组件中，自定义事件是一种基于发布-订阅模式的机制。在组件中，可以使用vm.$on(eventName, callback)方法进行事件的订阅，使用vm.$emit(eventName[, args])方法触发事件。下面是一个简单的示例：

创建子组件

在父组件中，可以通过v-on指令监听子组件的自定义事件：

监听子组件的自定义事件

段落二：Vue组件中的全局事件总线。 在Vue组件中，可以使用事件总线的方式进行组件之间的通信。Vue提供了一个像全局对象一样使用的Vue实例，可以使用它实现全局事件总线。

创建事件总线

// 创建事件总线
export const bus = new Vue()

在发送事件时，我们可以通过通过事件总线发送：

通过事件总线发送事件

import {bus} from './eventBus'

bus.$emit('event-name', args)

在接收事件时，我们可以通过事件总线监听事件：

通过事件总线监听事件

import {bus} from './eventBus'

created() {
  bus.$on('event-name', args => {
    console.log(args) // 输出事件参数
  })
}

段落三：Vue组件中的子组件之间的事件通信。 在Vue组件中，子组件之间的通信也可以通过事件总线来实现。我们可以利用Vue实例作为事件总线，通信实际上就是在Vue实例中进行。 下面是一个简单的例子：

子组件之间的通信

import Vue from 'vue'

// 创建事件总线
export const bus = new Vue()

// 子组件A
export default {
  methods: {
    handleClick() {
      // 发送事件
      bus.$emit('eventName', args)
    }
  }
}

// 子组件B
export default {
  created() {
    // 监听事件
    bus.$on('eventName', args => {
      console.log(args) // 输出事件参数
    })
  }
}

通过以上的代码，我们可以看到，子组件A通过事件总线发送了一个事件，子组件B监听了这个事件并进行了处理。 段落四：总结 在Vue组件中，通过自定义事件和全局事件总线，我们可以实现组件之间的通信。自定义事件和全局事件总线有各自的特点，自定义事件在组件内部进行通信，而全局事件总线则可以在Vue实例级别的全局进行通信。无论是哪种方式，它们都可以为我们提供一种灵活的组件通信方式。