Blazor：如何将价值从一个组件发送到另一个组件？答案

【问题标题】：Blazor: How to send value from one component to another?Blazor：如何将价值从一个组件发送到另一个组件？
【发布时间】：2020-04-24 23:56:28
【问题描述】：

我的 MainLayout.razor 包含两个组件：Header.razor 和 Content.razor。通过选择不同的菜单选项内容得到改变。随着每个内容的变化，我需要将依赖于内容的 value 发送到 header。我尝试了不同的技术，结果相同 - header 中的 value 没有得到更新。还有什么我需要做的吗？我的代码：

Header.razor：

    <div>Content Name: @ContentName</div>
    @code {
        [Parameter]
        public string ContentName{ get; set; }
    }

Content.razor：

@code{
    [CascadingParameter]
    MainLayout Parent { get; set; }

    protected override void OnInitialized()
        {
            base.OnInitialized();
            ContentName = "Content 1";
            Parent.SetParameters(ContentName);
        }
}

MainLayout.razor：

@inherits LayoutComponentBase
@inject BlazorQART.Data.AppState AState
<div class="sidebar" >
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <Header ContentName="@_ContentName" />
    </div>
    <div class="content px-4">
        <CascadingValue Value="@this">
            @Body
        </CascadingValue>
    </div>
</div>
@code{
    private string _ContentName{ get; set; }
    protected override void OnInitialized()
    {
        base.OnInitialized();
        AState.OnContentChange = OnContentChanged;
    }
    public void SetParameters (string content)
    {
        AState.ChangedContent = content;
    }
    protected async void OnContentChanged(string content)
    {
        await InvokeAsync(() =>
        {
            _ContentName = content;
        });
    }

AppState.cs：

    public class AppState
    {
        private string _ChangedContent;
        public Action<string> OnContentChange { get; set; }
        public string ChangedContent
        {
            get { return _ChangedContent; }
            set
            {
                _ChangedContent= value;
                OnContentChange.Invoke(_ChangedContent);
            }
        }
    }

【问题讨论】：

标签： blazor

【解决方案1】：

您可以使用多种方法来解决此问题，我将分享其中的几种。

第一个选项是使用外部组件来处理状态并为您的内容和EventCallBack 方法传递参数。在大多数情况下，Blazor 引擎应自行获取更改并重新渲染。

Link to MS Component Parameters documentation

Link to MS Event Callback documentation

第二个选项涉及更多，涉及使用注入服务作为状态容器和事件中心，并订阅来自每个组件的事件以收集数据。 Take a look at the answer in this post 讨论如何实现这一点，我建议深入研究提到的关于 Blazor DI 生命周期的文章并确保你理解它们，但是一旦你这样做了，你就可以设置 Scoped 或 Transient 服务来支持你的页面在...上。此选项讨论跨连接更新组件，但以相同方式使用服务也适用于同一页面上的不同组件。对于您的情况，这可能有点矫枉过正，但它是一个很好的工具。

还有关于级联参数的快速说明：我看到您在上面列出了一个，并且此功能有它的用途，但它还将捕获[CascadingParameter] 属性的任何组件耦合到提供参数的组件，如一些您的组件的功能将取决于该级联参数。如果您只有 1 个父 -> 1 个子关系，我会坚持使用 [Parameter] 和 EventCallBack，这将使您的子组件更加便携和可重用。但是，如果您需要一个值来传递多个级别的子组件，那么您可能有一个很好的例子来级联该值。您必须权衡每种方法的优缺点，但我鼓励您考虑一下。

【讨论】：