Vue2组件通信进阶：解锁Custom Events跨组件数据共享之秘

2023-11-01 22:43:21

Custom Events：Vue.js 组件通信的利器

在构建大型交互式 Vue.js 应用时，组件之间的顺畅通信至关重要。Custom Events（自定义事件）作为一种强大的工具，为 Vue 组件之间的有效交互铺平了道路。了解 Custom Events 的工作原理、用法和应用场景，是掌握 Vue.js 开发必经之路。

Custom Events 的原理

Custom Events 本质上是一种特殊的事件类型，允许您在组件中定义和触发事件，并在其他组件中监听和处理这些事件。

定义和触发 Custom Events

要定义 Custom Event，只需使用 $emit() 方法。该方法接受两个参数：事件名称和事件数据。

// 定义 "my-event" 事件
this.$emit('my-event', { message: 'Hello World!' });

// 触发 "my-event" 事件
this.$emit('my-event');

监听和处理 Custom Events

监听和处理 Custom Event 也非常简单。使用 $on() 方法，该方法接受事件名称和处理函数作为参数。

// 监听 "my-event" 事件
this.$on('my-event', (data) => {
  console.log(data.message); // 输出 "Hello World!"
});

跨组件通信的应用

以下是使用 Custom Events 实现跨组件通信的一个示例：

父组件

<template>
  <child-component @my-event="handleEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleEvent(data) {
      console.log(data.message); // 输出 "Hello World!"
    }
  }
}
</script>

子组件

<template>
  <button @click="emitEvent">触发事件</button>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('my-event', { message: 'Hello World!' });
    }
  }
}
</script>