如何从父组件中的事件更新子组件属性

Question

我有一个管理各种事情的父组件。当事件在父级中完成时，我想强制子组件刷新或触发它们拥有的方法。是否有可能做到这一点？谢谢。

例如，该组件具有颜色属性。根据父组件状态的变化，我希望子组件相应地改变其颜色。

Answer 1

您可以像这样定义子组件：

儿童剃须刀

<p>Selected Color: @SelectedColor</p>

@code
{
    [Parameter]
    public string SelectedColor { get; set; }
}

上面的代码定义了一个公共属性，其值显示在组件的视图部分中。请注意，该属性用 Parameter 属性进行注释。接下来，我们将定义一个嵌入子组件的父组件。父组件为上面定义的 SelectedColor 提供字符串值。

家长剃刀

@page "/parent"

<p><input type="text" @bind="@MyColor" /></p>

<Child SelectedColor="@MyColor" />

@code
{
   private string MyColor;

}

父组件中有一个输入 Html 元素，该元素绑定到名为 MyColor 的变量。这种类型的绑定称为双向绑定。从变量 (MyColor) 到输入元素，反之亦然。现在，当您输入命名颜色并按 Tab 键移出文本框时，MyColor 变量将包含您输入的文本，并且如您所见，它被分配给子组件的 SelectedColor 属性。因此，每次您输入一个值并从文本框中跳出时，父组件都会使用输入的新值重新渲染子组件。

这只是开始，您还有很多东西需要学习...从文档开始，然后来这里提问...