Как обновить свойства дочернего компонента из события в родительском компоненте

Question

У меня есть родительский компонент, который управляет различными вещами. Когда событие заканчивается в родительском объекте, я хочу заставить дочерние компоненты обновить sh или вызвать метод, который у них есть. Можно ли сделать это? Спасибо.

Например, компонент имеет свойство цвета. Основываясь на изменении состояния родительского компонента, я хочу, чтобы дочерний элемент изменил свой цвет соответственно.

Answer 1

Вы можете определить дочерний компонент следующим образом:

Child.razor

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

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

Приведенный выше код определяет свойство publi c, значение которого отображается в части представления составная часть. Обратите внимание, что свойство помечено атрибутом Parameter. Далее мы собираемся определить родительский компонент, в который встроен дочерний компонент. Родительский компонент предоставляет строковое значение ta для SelectedColor, определенного выше.

Parent.razor

@page "/parent"

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

<Child SelectedColor="@MyColor" />

@code
{
   private string MyColor;

}

В родительском компоненте есть элемент input Html, который связан с переменной с именем MyColor. Этот тип привязки называется двусторонней привязкой. От переменной (MyColor) к элементу ввода и наоборот. Теперь, когда вы вводите именованный цвет и вкладку из текстового поля, переменная MyColor содержит введенный вами текст, и, как вы можете видеть, он назначается атрибуту SelectedColor дочернего компонента. Таким образом, каждый раз, когда вы вводите значение и вкладку из текстового поля, родительский компонент выполняет рендеринг дочернего компонента с введенным новым значением.

Это только начало, и вам нужно многому научиться ... начните с документов и приходите сюда, чтобы задавать вопросы ...