如何向上游传播组件参数绑定？

Question

这是代码：

TestComponentA.razor

<div style="border: 1px solid; padding: 4px;">
    <input @bind-value=this.TestParamA />
    Test Param A: @this.TestParamA
</div>
@code {
    [Parameter]
    public string TestParamA { get; set; } = null!;
    [Parameter]
    public EventCallback<string> TestParamAChanged { get; set; }
}

TestComponentB.razor

<div style="border: 1px solid; padding: 4px;">
    <TestComponentA @bind-TestParamA=this.TestParamB></TestComponentA>
    Test Param B: @this.TestParamB
</div>
@code {
    [Parameter]
    public string TestParamB { get; set; } = null!;
    [Parameter]
    public EventCallback<string> TestParamBChanged { get; set; }
}

Home.razor

@page "/"

<PageTitle>Home</PageTitle>
<div style="border: 1px solid; padding: 4px;">
    <TestComponentB @bind-TestParamB=this.TestParamC></TestComponentB>
    Test Param C: @this.TestParamC
</div>
@code {
    public string TestParamC = "45";
}

页面加载后，这是在输入中输入

test

后的结果：

我需要文本输入从最里面的组件向上传播到最上面。我该怎么做？

Answer 1

看起来

@bind-

语法不会自动触发调用堆栈的更改。

我不确定确切的原因，但我只能找到两种类型的

@bind-

语法示例：

Example 1

<input @bind-value="MyValue" />

@code {
  private string MyValue { get; set; }
}

根据我见过的示例，这可能是最常见的用法。正如我们所知，它设置了一个与本地属性进行双向绑定的输入。我们不需要知道文本何时改变，我们只关心当我们使用它时该属性具有输入的值。

Example 2

ChildComponent.razor

<input value="@MyValue" @onchange="@OnChanged" />

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

  [Parameter]
  public EventCallback<string> MyValueChanged { get; set; }

  private async Task OnChanged(ChangeEventArgs args)
  {
      await MyValueChanged.InvokeAsync(args.Value?.ToString());
  }  
}

ParentComponent.razor

<ChildComponent @bind-MyValue=MyValue></ChildComponent>

@code {
  private string MyValue { get; set; }
}

在此示例中，我们只看到 

@bind-

用于双向绑定本地属性 - 我们没有看到它用于触发调用堆栈的更改。子组件手动触发

EventCallback

，而不是假设

@bind-

会处理这个问题。结论

仅将

@bind-

用于双向绑定本地属性。向家长传达更改时手动触发事件回调。

解决方案

仅在您的 home 组件中使用

@bind-

。

ChildComponentA.razor

<div style="border: 1px solid; padding: 4px;">
    <input value="@TestParamA" @oninput="@OnInput" />    
    Test Param A: @this.TestParamA
</div>

@code {
    [Parameter]
    public string TestParamA { get; set; } = null!;
    [Parameter]
    public EventCallback<string> TestParamAChanged { get; set; }    

    private async Task OnInput(ChangeEventArgs e)
    {
        await TestParamAChanged.InvokeAsync(e.Value?.ToString());
    }
}

ChildComponentB.razor

<div style="border: 1px solid; padding: 4px;">    
    <TestComponentA 
      TestParamA="@TestParamB" 
      TestParamAChanged="@OnTestParamAChanged">
        </TestComponentA>
    
    Test Param B: @this.TestParamB
</div>
@code {    
    [Parameter]
    public string TestParamB { get; set; } = null!;
    [Parameter]
    public EventCallback<string> TestParamBChanged { get; set; }
    
    private async Task OnTestParamAChanged(string value)
    {
        await TestParamBChanged.InvokeAsync(value);
    }
}

Home.razor

@page "/"

<PageTitle>Home</PageTitle>
<div style="border: 1px solid; padding: 4px;">
    <TestComponentB @bind-TestParamB=this.TestParamC></TestComponentB>
    Test Param C: @this.TestParamC
</div>
@code {
    public string TestParamC = "45";
}

示例

这里是一个小提琴，显示了组件的两个版本 - 一组使用

@bind-

，另一组手动调用事件处理程序。

https://blazorfiddle.com/s/m4003s9g

请注意，在

@bind-

版本中，只有本地属性得到更新。