如何快速掌握Vue3 源码—组件 emit

2023-09-29 02:33:05

Vue3 带来了许多新的特性和改进，其中之一就是 emits 选项。通过使用 emits 选项，我们可以更轻松地定义组件可以触发的事件。在本文中，我们将探讨如何在 Vue3 中使用 emits 选项，以便更好地理解组件通信是如何工作的。

如何在 Vue3 中使用 emits 选项

在 Vue3 中，我们可以通过在组件选项中声明 emits 选项来定义组件可以触发的事件。例如，以下代码定义了一个名为 "MyComponent" 的组件，该组件可以触发 "my-event" 事件：

export default {
  emits: ["my-event"],
  setup() {
    // ...
  },
  template: `
    <div>
      <!-- 组件内容 -->
    </div>
  `,
};

当 "MyComponent" 组件触发 "my-event" 事件时，它将向其父组件发出一个事件。父组件可以使用 v-on 指令来监听 "my-event" 事件，并在该事件触发时执行相应的代码。例如，以下代码演示了如何使用 v-on 指令来监听 "my-event" 事件：

<template>
  <MyComponent v-on:my-event="handleMyEvent" />
</template>

<script>
export default {
  methods: {
    handleMyEvent(event) {
      // 当 "MyComponent" 组件触发 "my-event" 事件时，该方法将被调用
    },
  },
};
</script>

使用 composition API 的 emits 选项

在 Vue3 中，我们也可以使用 composition API 来定义组件可以触发的事件。使用 composition API，我们可以通过将 emits 选项传递给 setup 函数来定义组件可以触发的事件。例如，以下代码演示了如何使用 composition API 来定义组件可以触发的事件：

import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const myEvent = ref(null);

    const emitMyEvent = () => {
      myEvent.value = "my-event";
    };

    return {
      myEvent,
      emitMyEvent,
    };
  },
  template: `
    <div>
      <!-- 组件内容 -->
    </div>
  `,
});

当调用 emitMyEvent() 函数时，"MyComponent" 组件将触发 "my-event" 事件。父组件可以使用 v-on 指令来监听 "my-event" 事件，并在该事件触发时执行相应的代码。例如，以下代码演示了如何使用 v-on 指令来监听 "my-event" 事件：

<template>
  <MyComponent v-on:my-event="handleMyEvent" />
</template>

<script>
export default {
  methods: {
    handleMyEvent(event) {
      // 当 "MyComponent" 组件触发 "my-event" 事件时，该方法将被调用
    },
  },
};
</script>