Blazor 3.0 Preview 6的@<事件名>语法是否等价于Angular/Vue的事件触发？

Great question! To cut to the chase: yes, Blazor's new @EventName component event binding syntax is functionally equivalent to Angular's EventEmitter and Vue's custom events—all three are standardized, framework-native ways for child components to trigger events and pass data up to their parent components. Let’s break this down clearly:

Core Purpose & Functionality #

All three mechanisms solve the exact same problem: enabling one-way child-to-parent communication where a child component can notify its parent of an action (like a button click, form submission, or data update) and optionally send along a payload of data. They eliminate the need for manual callback prop passing (though under the hood, that’s roughly what’s happening with syntactic sugar).

Key Similarities #

• Trigger-and-Listen Pattern:
  • Child components initiate an event (e.g., Blazor calls EventCallback.InvokeAsync(), Angular uses EventEmitter.emit(), Vue calls $emit()).
  • Parent components register a handler for that event using framework-specific syntax (Blazor’s @EventName, Angular’s (eventName), Vue’s @event-name).
• Data Payload Support: All three allow you to pass data from the child to the parent when triggering the event.
• Framework Integration: Each is tightly integrated with their respective framework’s lifecycle and rendering system, ensuring that component updates happen correctly after the event is handled.

Minor Implementation Differences #

While the core functionality matches, there are small implementation nuances:

• Blazor’s EventCallback: It’s not just a simple delegate—it’s tied to the component’s lifecycle, automatically handling asynchronous operations and triggering component re-renders when needed. This means if your parent’s event handler is an async Task, Blazor will manage the state update seamlessly.
• Angular’s EventEmitter: Under the hood, it’s a wrapper around an RxJS Subject, so you can also subscribe to it like an observable if needed (though the standard use case is the template (eventName) binding).
• Vue’s Custom Events: In Vue 2, it uses an internal event bus; in Vue 3, it’s formalized with defineEmits for better type safety. Vue also has some extra rules (like event name casing conventions) that don’t apply to Blazor or Angular.

Side-by-Side Examples #

To make this concrete, here’s how a simple "send message from child to parent" flow looks in each framework:

Blazor #

Child Component:

<button @onclick="SendMessage">Send Message</button>

@code {
    [Parameter]
    public EventCallback<string> OnMessageSent { get; set; }

    private async Task SendMessage()
    {
        // Trigger the event and pass data to the parent
        await OnMessageSent.InvokeAsync("Hello from Blazor Child!");
    }
}

Parent Component:

<ChildComponent @OnMessageSent="HandleMessage" />

<p>Received: @receivedMessage</p>

@code {
    private string receivedMessage;

    private void HandleMessage(string message)
    {
        receivedMessage = message;
    }
}

Angular #

Child Component:

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

@Component({
  selector: 'child-component',
  template: `<button (click)="sendMessage()">Send Message</button>`
})
export class ChildComponent {
  @Output() messageSent = new EventEmitter<string>();

  sendMessage() {
    // Emit the event with data
    this.messageSent.emit("Hello from Angular Child!");
  }
}

Parent Template:

<child-component (messageSent)="handleMessage($event)"></child-component>
<p>Received: {{ receivedMessage }}</p>

Vue (Vue 2 Example) #

Child Component:

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // Emit the custom event with data
      this.$emit('message-sent', 'Hello from Vue Child!');
    }
  }
}
</script>

Parent Component:

<template>
  <child-component @message-sent="handleMessage"></child-component>
  <p>Received: {{ receivedMessage }}</p>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message;
    }
  }
}
</script>

Final Verdict #

While the syntax and low-level implementations vary, the core purpose and user-facing behavior are identical. Blazor’s @EventName syntax is just its take on the same child-to-parent event communication pattern that Angular and Vue have implemented with EventEmitter and custom events.

内容的提问来源于stack exchange，提问作者Stéphane B.