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

Question

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

例如，组件具有颜色属性。基于父组件的状态变化，我希望孩子相应地更改其颜色。

Answer 1

您可以这样定义子组件：

Child.razor

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

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

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

Parent.razor

@page "/parent"

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

<Child SelectedColor="@MyColor" />

@code
{
   private string MyColor;

}

在父组件中是一个输入Html元素，该元素绑定到名为MyColor的变量。这种类型的绑定称为双向绑定。从变量（MyColor）到输入元素，反之亦然。现在，当您输入一种命名的颜色并在文本框中跳出标签时，MyColor变量包含您输入的文本，并且您可以看到，它被分配给子组件的SelectedColor属性。因此，每次输入值并在文本框中跳出标签时，父组件都会使用输入的新值重新渲染子组件。

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