面向云技术架构 - 痴者工良

  • 首页
  • 工良写的电子书
    • kubernetes 教程
    • 从 C# 入门 Kafka
    • 多线程和异步
    • 动态编程-反射、特性、AOP
    • 表达式树
  • 本站文章导航
  • 隐私政策
愿有人陪你颠沛流离
遇到能让你付出的事物或者人,都是一种运气。
能遇到,就该珍惜。或许你们最终没能在一起,但你会切实地感受到力量。
正因为这样,那段相遇才变得有价值,才没有辜负这世间的每一段相遇。
  1. 首页
  2. 笔记和吹水
  3. 代码片段
  4. 正文

Blazor:级联值和参数

2020年5月11日 4631点热度 0人点赞 0条评论
内容纲要

级联值和参数


<CascadingValue Value="@_grandValue" Name="GrandValue">
    <Parent />
</CascadingValue>

当数据要从父子组件间流通时,我们有多种方法可以传递参数。但是如果层级超过两个的时候,就那么方便了。如果出现多个子组件的时候,就更加爆炸了。

级联值和参数提供了一种方便的方法,使祖先组件为其所有子代组件提供值,从而解决了上述问题。 级联值和参数还提供了一种协调组件的方法。

CascadingValue 组件用来包装组件层次结构。例如在祖先组件中调用下一层的组件:

将 <Parent /> 放进 <CascadingValue> 组件中,生成层次结构。


<CascadingValue Value="@_grandValue" Name="GrandValue">
    <Parent />
</CascadingValue>

而且底层组件需要使用属性来接收其祖先组件传递的参数,并且使用 [CascadingParameter] 特性修饰属性。

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

Name 不是必要的。

其使用示例如下:

创建三个 .razor 文件,Grand.razor 祖先组件,Parent.razor 父组件,Child.razor 子组件。

Child.razor 内容如下:


<div>
    孙组件:
    <p>传递的值: @ChildValue</p>
</div>
@code {
    [CascadingParameter(Name = "ChildValue")]
    string ChildValue { get; set; }
}

Parent.razor 内容如下:


父组件不做任何处理:
    <Child />

Grand.razor 内容如下:

@page "/g"
祖先组件:
<p>传递的值:<input @bind="_ChildValue" /></p>
提示:修改值后,鼠标点击其它地方即可更新孙组件的值
<!--Vaue:孙属性名称,Name:孙属性CascadingParameter特性的Name值-->
<CascadingValue Value="@_ChildValue" Name="ChildValue">
    <Parent />
</CascadingValue>
@code {
    private string _ChildValue = "666";
}

如果有多个值需要传递,就使用多个 CascadingValue,使用方法如下:

file

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: blazor 参数 级联
最后更新:2020年5月11日

痴者工良

高级程序员劝退师

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

文章目录
  • 级联值和参数

COPYRIGHT © 2022 whuanle.cn. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

粤ICP备18051778号

粤公网安备 44030902003257号