父组件如何订阅子组件的SpeedChanged事件

Question

我有一个名为Earth的子组件，如下所示。

<h3>Earth's speed is @Speed unit.</h3>
@code {
[Parameter] public double Speed { get; set; }
[Parameter] public EventCallback<double> SpeedChanged { get; set; }
}

一个称为God的父组件按如下方式消耗Earth。

@page "/God"
<Earth @bind-Speed="speed" SpeedChanged="Job" />
<button @onclick="@(()=>speed=0)">Stop Spinning!</button>
@code {
private double speed = 100.0;
private void Job(double s)
{
Console.WriteLine($"Earth's speed: {s}");
}
}

在这里，我试图通过订阅Earth组件的SpeedChanged

<Earth @bind-Speed="speed" SpeedChanged="Job" />

不幸的是，我在Visual Studio上遇到了以下错误：

组件参数SpeedChanged用于此组件。参数必须唯一(区分大小写(。。。

如何解决此问题？欢迎有任何想法！

编辑

从MS文档中，我了解到

<Earth @bind-Speed="speed" />

相当于

<Earth @bind-Speed="speed" @bind-Speed:event="SpeedChanged" />

Answer 1

当您实现组件数据绑定时，您应该定义两个参数属性，就像您实际做的那样：

[Parameter] public double Speed { get; set; }
[Parameter] public EventCallback<double> SpeedChanged { get; set; }

要将此子组件绑定到父组件的属性，请执行以下操作：

<Earth @bind-Speed="speed"/>

这将在父组件和子组件之间创建双向数据绑定。

注意：您没有为SpeedChanged属性提供值。这是隐含的，这就是为什么当你试图这样做时会出现错误，因为编译器会自己做。编译器插入执行从子级到父级绑定的代码。

从MS文档中，我了解到

<Earth @bind-Speed="speed" />

相当于

<Earth @bind-Speed="speed" @bind-Speed:event="SpeedChanged" />

这是真的，但你在做其他事情。。。正如我所说的，编译器将添加SpeedChanged。。。现在，如果你尝试手动添加它，就好像你使用了两次。。。不允许。

当您在输入元素和属性之间创建双向数据绑定时，如下所示：

<input type="text" @bind="MyProperty"/>

编译器在后台创建绑定，就好像你写了：

<input type="text" value="MyProperty" @onchange="@((args)=>MyProperty=args.Value.ToString())"/>

现在，如果您编写了类似<input type="text" @bind="MyProperty" @onchange="....."/>的东西，编译器将开始尖叫onchange已经被使用。你的代码也会发生同样的事情。