在 Blazor 中在子组件和父组件之间共享数据

介绍

可以在Blazor 中创建一个子组件并在另一个组件中重用它。我们将非常轻松地在这些组件之间共享数据。我们将创建一个自定义文本框作为子组件。此自定义文本框将显示文本框中的当前字符数，并在需要时限制字符总数。我将逐步解释所有操作。

在 Visual Studio 中创建 Blazor 应用程序

从 Visual Studio 中选择 Blazor 模板并创建 Blazor 应用程序。

我们可以在“Pages”文件夹中创建一个新的razor组件。

我们可以在组件中定义 HTML 标记。

<div class="float-right">
    <i>Total Characters : @TextLength/@LengthString</i>
</div>
<div class="form-group row mb-2">
    <label class="col-md-3 col-form-label" for="Name">@FieldName</label>
    <div class="col-md-7">
        <input class="form-control" type="text" placeholder="@FieldName" value="@Value" @oninput="OnValueChanged" maxlength="@MaxLength" />
    </div>
</div>

我们还可以在@code 块内添加 C# 代码。

@code {
    [Parameter]
    public string Value { get; set; }
    [Parameter]
    public string FieldName { get; set; }
    [Parameter]
    public int MaxLength { get; set; } = -1;
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
    string LengthString;
    int TextLength;
    protected override void OnInitialized()
    {
        TextLength = Value.Length;
        LengthString = (MaxLength == -1) ? "Unlimited" : MaxLength.ToString();
    }
    private Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value.ToString();
        TextLength = Value.Length;
        return ValueChanged.InvokeAsync(Value);
    }
}

我们定义了三个参数属性“Value”，“FieldName”和“MaxLength”。

FieldName 用于在自定义文本框中显示字段名称和占位符值。
MaxLength 用于在需要时限制自定义文本框中的最大字符数。
Blazor 中的 FieldName 和 MaxLength 属性充当 Angular 中的 @Input 装饰器。这些属性用于将数据从父组件共享到子组件。
Value 属性充当 Angular 中的 @Output 装饰器。这将用于将数据从子组件共享回父组件。
在 Angular 中，我们使用 EventEmitter 和 Output 装饰器将数据从子组件共享到父组件。在 Blazor 中，我们使用“EventCallback”参数将值从子组件发送到父组件。
请注意，“Changed”后缀被添加到 value 属性参数。这是 Blazor 中使用的默认约定。

我们创建了一个“OnValueChanged”方法，并将其与 HTML 标记中输入控件的“@oninput”属性绑定。

CustomTextbox.razor

<div class="float-right">
    <i>Total Characters : @TextLength/@LengthString</i>
</div>
<div class="form-group row mb-2">
    <label class="col-md-3 col-form-label" for="Name">@FieldName</label>
    <div class="col-md-7">
        <input class="form-control" type="text" placeholder="@FieldName" value="@Value" @oninput="OnValueChanged" maxlength="@MaxLength" />
    </div>
</div>
@code {
    [Parameter]
    public string Value { get; set; }
    [Parameter]
    public string FieldName { get; set; }
    [Parameter]
    public int MaxLength { get; set; } = -1;
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
    string LengthString;
    int TextLength;
    protected override void OnInitialized()
    {
        TextLength = Value.Length;
        LengthString = (MaxLength == -1) ? "Unlimited" : MaxLength.ToString();
    }
    private Task OnValueChanged(ChangeEventArgs e)
    {
        Value = e.Value.ToString();
        TextLength = Value.Length;
        return ValueChanged.InvokeAsync(Value);
    }
}

我们可以在父组件内添加这个子组件。我们可以创建一个新的父组件。

ParentComponent.razor

@page "/parentcomponent"
<CustomTextbox @bind-Value="name" FieldName="Name" MaxLength="20" />
<CustomTextbox @bind-Value="address" FieldName="Address" />
@code {
    string name = "Sarath Lal";
    string address = "Kakkanad";
}

我们在这个父组件内添加了两个自定义文本框子组件。“@bind-{parametername}”用于将子组件字段与父组件字段绑定。这里，“Value”是子组件中的字段名称。因此，我们将其用作“@bind-Value”。我们可以从父组件传递这两个输入参数“FieldName”和“MaxLength”。我没有为第二个子组件传递 MaxLength 属性。因此，运行时将为该组件分配默认值 -1。

我们可以修改共享组件“NavMenu”，为父组件添加导航。

NavMenu.razor

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">BlazorReusableComponent</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="parentcomponent">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Parent Component
            </NavLink>
        </li>
    </ul>
</div>
@code {
    bool collapseNavMenu = true;
    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

我们可以运行该应用程序。