Blazor 组件通讯

　　Blazor 组件通讯示例，包含联级传参、双向绑定、服务传参 3 种方式。

Son.razor

@using BlazorApp.Shared.Services;
<div style="border:inherit;margin:inherit;background-color:ivory;">
    <h3>Son---@Value<input class="btn btn-info" type="button" value="自身+1，同时Self组件值+1" @onclick="ChangeValue" /></h3>

    <input type="text" @bind-value="@sunValue" />
    <input class="btn btn-info" type="button" value="控制Grand组件显示值" @onclick="ChangeGrandValue" />

    <h6>来自Parent组件 @ParentValue</h6>
    <input type="text" name="name" @bind-value="@Ceshi" />
    <button @onclick="@Henfgu">给邻居发消息</button>
</div>
@code {
    [Parameter]
    public int? Value { get; set; } = 0;

    public string? Ceshi { get; set; }
    [Inject]
    public CommunicationToString? communicationToString { get; set; }

    private async Task ChangeValue()
    {
        Value++;
        if (OnValueChanged.HasDelegate)
        {
            await OnValueChanged.InvokeAsync(Value);
        }
    }

    public string? sunValue { get; set; } = "Sun";

    /// <summary>
    /// 获取Name为GrandValue的Grand组件
    /// </summary>
    [CascadingParameter(Name = "GrandValue")]
    Grand? grand { get; set; }

    public async Task ChangeGrandValue()
    {
        await InvokeAsync(grand?.State_HasChanged(() => { grand.SetValue($"来自Sun组件 {sunValue}"); })!);
    }

    public async Task Henfgu()
    {
        if (communicationToString != null)
            communicationToString.Callback(Ceshi ?? "");

        await Task.CompletedTask;
    }

    [CascadingParameter(Name = "ParentValue")]
    string? ParentValue { get; set; }

    [Parameter]
    public EventCallback<int?> OnValueChanged { get; set; }
}

 

Self.razor

<div style="border:inherit;margin:inherit;background-color:#e4e4b5;">
    <h3>Self---@Value<input class="btn btn-info" type="button" value="+1" @onclick="OnInput" /></h3>
    
    <h6>来自Family组件 @family?._familyValue</h6>
    <Son Value="@Value" OnValueChanged="OnValueChanged" />
</div>
@code {
    [Parameter]
    public int? Value { get; set; } = 0;

    public void OnInput()
    {
        Value++;
    }

    /// <summary>
    /// 获取上级Name为FamilyValue的Family组件
    /// </summary>
    [CascadingParameter(Name = "FamilyValue")]
    Family? family { get; set; }

    private void OnValueChanged(int? val)
    {
        Value = val;
    }
}

 

Parent.razor

<div style="border:inherit;margin:inherit;background-color:#f6df6e;">
    <h3>Parent---@Value<input class="btn btn-info" type="button" value="+1" @onclick="OnInput" /></h3>
    
    <input type="text" name="name" @bind-value="_parentValue" />
    <CascadingValue Value="@_parentValue" Name="ParentValue">
        <Self Value="@Value" />
    </CascadingValue>
</div>
@code {
    [Parameter]
    public int? Value { get; set; } = 0;

    private string _parentValue = "ParentValue";


    public void OnInput()
    {
        Value++;
    }
}

 

Grand.razor

<div style="border:inherit;margin:1.5rem 5rem 5rem 5rem;background-color:forestgreen;">
    <h3>Grand---@Value<input class="btn btn-info" type="button" value="点击+1，同时改变Family的值" @onclick="OnInput" /></h3>
    双向绑定：<input type="text" name="name" value="@Value" @onchange="ChangeParentValue" />
    <h6>@value</h6>
    <CascadingValue Value="this" Name="GrandValue">
        <Parent Value="@Value" />
    </CascadingValue>
</div>
@code {
    #region 双向绑定
    [Parameter]
    public int? Value { get; set; } = 0;

    /// <summary>
    /// 命名方法 绑定的参数名+Changed
    /// </summary>
    [Parameter]
    public EventCallback<int?> ValueChanged { get; set; }

    private async Task ChangeParentValue(ChangeEventArgs e)
    {
        if (e != null)
        {
            int.TryParse(e.Value!.ToString(), out var str);
            await ValueChanged.InvokeAsync(str);
        }
    }
    #endregion

    public async Task OnInput()
    {
        Value++;
        await ValueChanged.InvokeAsync(Value);
    }

    public string value { get; set; } = "Grand";

    public void SetValue(string value)
    {
        this.value = value;
    }

    public Action<string> Test => (value) => { this.value = value; StateHasChanged(); };

    public Action? State_HasChanged(Action Execute) => Execute + StateHasChanged;
}

 

Family.razor

@page "/family"
    <Neighbor />
    <Divider />
    <div style="border:solid;background-color:lightsteelblue;">
        <h3>Family---@Value<input class="btn btn-info" type="button" value="+1" @onclick="OnInput" /></h3>

        <input type="text" name="name" @bind-value="_familyValue" />
        <CascadingValue Value="this" Name="FamilyValue">
            <Grand @bind-Value="@Value" />
        </CascadingValue>

    </div>
    @code {
        public int? Value { get; set; } = 0;

        public string _familyValue = "FamilyValue";

        public void OnInput()
        {
            Value++;
        }

    }

Neighbor.razor

@using BlazorApp.Shared.Services;
<div style="border:solid;background-color:lightsteelblue;">
    <h3>Neighbor</h3>
    <h5>来至邻居家的： @Test</h5>
</div>
@code {
    public string? Test { get; set; }


    [Inject]
    public CommunicationToString? communicationToString { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        //注册服务
        communicationToString?.Register(Ceshi);
    }


    public Task Ceshi(string value)
    {
        Test = value;
        StateHasChanged();
        return Task.CompletedTask;
    }
}

 

CommunicationToString.cs

namespace BlazorApp.Shared.Services
{
    public class CommunicationToString : ServiceBase<string>
    {

    }
}

 

ServiceBase.cs

using System;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace BlazorApp.Shared.Services
{
    public abstract class ServiceBase<TOption>
    {
        private Func<TOption, Task>? _Callback { get; set; }

        private IDictionary<string, Func<TOption, Task>>? _Callbacks { get; set; } = new Dictionary<string, Func<TOption, Task>>();

        /// <summary>
        /// 注册方法
        /// </summary>
        /// <param name="callback"></param>
        internal void Register(Func<TOption, Task> callback) => _Callback = callback;

        /// <summary>
        /// 回调方法
        /// </summary>
        /// <param name="option"></param>
        /// <returns></returns>
        public virtual void Callback(TOption option) => _Callback?.Invoke(option);

        /// <summary>
        /// 注册方法到集合
        /// </summary>
        /// <param name="key"></param>
        /// <param name="callback"></param>
        internal void Register(string key, Func<TOption, Task> callback) => _Callbacks?.Add(key, callback);

        /// <summary>
        /// 根据key值回调方法
        /// </summary>
        /// <param name="key"></param>
        /// <param name="option"></param>
        public virtual void Callback(string key, TOption option)
        {
            if (_Callbacks != null && _Callbacks.TryGetValue(key, out var callback))
            {
                callback.Invoke(option);
            }
        }
    }
}