Angular React Vue 比较 – 组件篇之事件

组件的事件它和原生 DOM 事件不一样组件，触发的事件没有冒泡机制。我们只能监听直接子组件触发的事件。本章我们比较的三大框架组件中的事件就是父组件监听子组件的事件。

Angular 组件中的事件

在 Angular 中，子组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits (向上弹射)事件。父组件绑定到这个事件属性，并在事件发生时作出回应。

父组件监听事件

父组件 ParentComponent 绑定了一个事件处理器( handleChildEmit() )，用来响应子组件的事件( $event )更新消息。

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h1>父组件</h1>
    <p>从子组件接收的数据：{{ message }}</p>
    <app-child (sent)="handleChildEmit($event)"></app-child>
  `,
})
export class ParentComponent {
  message: string = '';

  // 定义一个回调函数，接收子组件传递的数据
  handleChildEmit(data: string) {
    this.message = data;
  }
}

子组件触发事件

子组件的 EventEmitter 属性是一个输出属性，通常带有 @Output 装饰器，就像在 ChildComponent 中看到的。

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h2>子组件</h2>
    <button (click)="send(data)">向父组件发送数据</button>
  `,
})
export class ChildComponent {
  // 定义一个数据，可以是任意类型
  data: string = 'Hello, Parent!';

  // 使用 @Output() 装饰器，它把该属性标记为数据从子组件进入父组件的一种途径。
  @Output() sent: EventEmitter<string> = new EventEmitter();

  send(message: string) {
    this.sent.emit(message);
  }
}

React 组件中的事件

在 React 中并没有单独定义组件事件，我们可以通过 props 传递一个回调函数，然后在子组件中调用这个函数来通知父组件。

父组件监听事件

在父组件中我们将事件处理函数作为 props 传递给子组件。

import React, { useState } from 'react';
import Child from './Child';

export default function Parent() {
  const [message, setMessage] = useState('');

  // 定义一个回调函数，接收子组件传递的数据
  function handleChildEmit(data) {
    setMessage(data);
  };

  return (
    <div>
      <h1>父组件</h1>
      <p>从子组件接收的数据：{message}</p>
      {/* 通过 props 传递回调函数给子组件 */}
      <Child onEmit={handleChildEmit} />
    </div>
  );
}

子组件触发事件

在子组件上触发按钮的点击事件后，通过调用父组件通过 props 传递过来的函数来通知父组件。

import React from 'react';

export default function Child({ onEmit }) {
  // 定义一个数据，可以是任意类型
  const data = 'Hello, Parent!';
  
  function handleSendMessage() {
    onEmit(data);
  }

  return (
    <div>
      <h2>子组件</h2>
      <button onClick={handleSendMessage}>向父组件发送数据</button>
    </div>
  );
}

Vue 组件中的事件

Vue 的组件通信方式很简单，子组件可以使用 $emit 方法触发一个自定义事件，父组件可以使用 v-on 指令或 @ 语法来监听这个事件。

父组件监听事件

在父组件中可以通过 v-on (缩写为 @) 来监听事件。

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const message = ref('')

function handleChildEmit(data) {
  message.value = data
}
</script>

<template>
  <div>
    <h1>父组件</h1>
    <p>从子组件接收的数据：{{ message }}</p>
    <Child @custom-event="handleChildEmit" />
  </div>
</template>

子组件触发事件

我们在 <template> 中使用的 $emit 方法可以直接触发事件，不过此方法不能在组件的 <script setup> 部分中使用，在 <script setup> 部分中可以使用 defineEmits() 来先声明后调用。

<template> 中的触发

<template>
  <div>
    <h2>子组件</h2>
    <!-- 点击按钮时，使用 $emit 方法触发一个自定义事件，并传递数据 -->
    <button @click="$emit('custom-event', 'Hello, Parent!')">向父组件发送数据</button>
  </div>
</template>

<script setup>

</script>

<script setup> 中的触发

<script setup>
const emit = defineEmits(['custom-event'])

function handleSendMessage(message) {
  emit('custom-event', { message })
}
</script>

<template>
  <div>
    <h2>子组件</h2>
    <!-- 点击按钮时，使用 $emit 方法触发一个自定义事件，并传递数据 -->
    <button @click="handleSendMessage('Hello, Parent!'))">向父组件发送数据</button>
  </div>
</template>

小结

本章介绍了三大框架组件的事件，对组件中事件的监听与触发做了说明。

Angular 子组件使用 @Output() 属性来引发事件以通知父组件。@Output() 必须是 EventEmitter 类型，它是 @angular/core 中用来发出自定义事件的类。父组件绑定到这个事件属性，并在事件发生时作出回应。

React 子组件使用父组件通过 props 传递的回调函数来通知父组件。

Vue 子组件中有两种触发事件方法，在 <template> 可以使用 $emit 方法触发一个自定义事件，在 <script setup> 部分中可以使用 defineEmits() 来先声明后调用，父组件可以使用 v-on 指令或 @ 语法来监听这个事件。

文章参考链接：

• https://angular.cn/guide/component-interaction#parent-listens-for-child-event
• https://angular.cn/guide/inputs-outputs#sending-data-to-a-parent-component
• 响应事件 – React 中文文档
• 组件事件 | Vue.js