Blazor WASM组件渲染异常：组件无匹配myEventCallback属性问题排查

问题根源 #

报错的核心原因是子组件与父组件的EventCallback参数类型不匹配：

• 子组件ALogin.razor中定义的LogMeIn是EventCallback<LoginModel>类型，触发时会传递LoginModel对象
• 父组件HelloWorld.razor中的rLogin方法却接收两个独立的string参数（email和password）

Blazor无法将LoginModel对象自动拆分为两个独立参数，导致回调绑定失败，抛出属性不匹配的错误。

解决方法（两种任选其一） #

方法一：修改父组件的回调方法参数类型 #

将HelloWorld.razor中的rLogin方法改为接收LoginModel参数，同时引用子组件中定义的LoginModel类型：

@using blazor1.Pages

<h1>@message</h1>
<button @onclick="ToggleLoginForm">ClickMe</button>

@if (showLoginForm)
{
    <ALogin @LogMeIn="rLogin" />
}

@code {
    private string message = "Hey ";
    private bool showLoginForm = false;

    private void ToggleLoginForm()
    {
        showLoginForm = !showLoginForm;
    }

    // 修改参数为LoginModel类型
    private void rLogin(ALogin.LoginModel loginData)
    {
        if (loginData.Email == "something@gmail.com")
        {
            message = "Hello John";
        }
    }
}

方法二：修改子组件的EventCallback类型 #

如果希望保持父组件的rLogin方法参数不变，可以修改ALogin.razor中的EventCallback为接收两个string参数的类型：

@using blazor1.Pages

<form>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" @bind="email" class="form-control" />
    </div>
    <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" @bind="password" class="form-control" />
    </div>
    <button type="button" @onclick="Submit">Submit</button>
</form>

@code {
    // 修改EventCallback为接收两个string参数
    [Parameter]
    public EventCallback<string, string> LogMeIn { get; set; } 
 
    private string email = "";
    private string password = "";

    private async Task Submit()
    {
        // 传递两个独立参数
        await LogMeIn.InvokeAsync(email, password);
    }
}

注意：这里将async void改为async Task，Blazor组件中推荐使用async Task而非async void，避免潜在的异常处理问题。

额外优化建议 #

• 子组件中的LoginModel如果需要在多个组件中使用，建议提取到单独的类文件（如Models/LoginModel.cs），避免嵌套在组件内部，提升代码复用性和可读性。
• 父组件引用子组件内部类时，ALogin.LoginModel的写法虽然可行，但长期来看不利于维护，提取到独立类文件是更优选择。

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