MudBlazor组件API Methods的用途及访问调用方式

这类API方法的设计适用场景 #

MudBlazor文档里列的所有组件API Methods都是正式对外开放的调用接口，专门用来覆盖默认交互满足不了的业务场景，常见适用情况包括：

• 自定义触发时机：比如MudMenu默认只支持点击菜单项、点击菜单外部区域关闭，如果你需要在点击菜单内嵌的自定义按钮、表单提交成功、按下ESC快捷键、操作超时等自定义时机触发关闭，就可以直接调用Close()方法，不用自己hack组件内部状态。
• 跨逻辑主动控制组件：不需要通过双向绑定传值、层层回调的方式触发组件行为，拿到组件实例就能直接调用，链路更短，适合需要即时响应的交互。
• 补全默认交互缺失的逻辑：官方默认封装的都是通用场景，比如菜单自动关闭、弹窗强制刷新、表格手动重新加载这类定制化需求，都可以通过对应公开方法实现，不用自己重写组件。

正确调用方式（以MudMenu的Close()方法为例） #

Blazor里调用组件实例方法的标准方式是用@ref指令拿到组件引用，步骤非常简单：

1. 在写组件标签的时候加上@ref绑定，指向你定义的变量

<MudMenu @ref="_operateMenu" Label="功能菜单">
    <MudMenuItem>常规选项</MudMenuItem>
    <MudMenuItem @onclick="ExecuteCustomLogic">执行自定义操作后关闭</MudMenuItem>
</MudMenu>

2. 在@code块声明和组件类型匹配的变量，用来存组件实例

@code {
    // 变量名和@ref绑定的名称一致即可
    private MudMenu _operateMenu;
}

3. 在你需要触发行为的逻辑里，直接通过这个变量调用对应方法就行

private async Task ExecuteCustomLogic()
{
    // 先跑自己的业务逻辑
    await SubmitFormData();
    // 业务逻辑跑完直接调用Close方法强制关菜单
    _operateMenu.Close();
}

注意：别在OnInitialized这类组件还没完成首次渲染的生命周期里调用实例方法，这时候@ref的变量还没被赋值，会抛空引用错误，最早要等OnAfterRender第一次执行之后再调用。

避坑提示 #

• 不要用模拟点击遮罩、手动改组件CSS类的方式实现相同效果，这类非官方写法在组件版本升级后大概率失效，文档列出来的公开API都是做了版本兼容承诺的，可以放心用。
• 不需要额外开启配置、引入其他包才能调用这些方法，只要项目里正常用了MudBlazor，拿到组件ref就能直接调。

内容的提问来源于stack exchange，提问作者Loophole