Blazor—— 父子组件、嵌套组件以及平行组件，他们到底是如何交互通信的呢？

前言

现在的前端开发，几乎都是基于组件的研发模式，即把每一块独立的功能切割成独立的组件，然后在大组件里根据需要自由组合这些小组件，使得组件的复用性提高，而小组件更容易测试和修改，从而提升研发的效率。比如按钮、文本框、对话框、点评星星等等都是可以被任意复用的小组件。

那么问题来了，组件之间是怎么进行通信呢？

父子组件之间的通信

当前组件即父组件，嵌套了一个封装好的组件，因此称这个组件为该组件的子组件。比如对话框。

父组件操作子组件

<button class="btn btn-primary" @onclick="e=>modal.Show()">对话框</button>

<BootModal @ref="modal">
    <HeadTemplate>
        <h4>你好</h4>
    </HeadTemplate>
    <BodyTemplate>
        弹出一个对话框
    </BodyTemplate>
</BootModal>

@code{
    BootModal modal;
}

我们使用了一个对话框的组件 BootModal，然后通过一个 @ref 关键字，可以让这个组件与该组件的实例进行关联，这样我们就可以通过代码操作这个实例了，比如调用方法。

回到我定义的一个按钮上，触发一个 @onclick 事件，然后调用这个 modal 的 Show 方法弹出对话框。

子组件变化通知父组件

通过 EventCallback 事件的触发，使订阅该事件的对象得到触发后的通知。

在子组件中，可以定义一个 EventCallback 类型的属性，称为事件。

注意：这里的事件不是 C# 的 event 类型，而是一个 EventCallback 委托类型。

然后在需要的时候触发这个事件，被订阅的对象即可被执行，类似于订阅者模式。

[Parameter] public EventCallback On[EventName