Dotnet9

联系请关注微信公众号:Dotnet9

文章

(12/30)大家一起学Blazor:Cascading values and parameters

StrayaWorker 2021-12-15 23:38:24 Blazor 32
昨天不小心把Reset按钮的type改成button,今天改回reset。

(注:昨天不小心把Reset按钮的type改成button,今天改回reset。)

我们目前建立了3个组件,BlogPostMyButton,如果想让3个组件的字体颜色或是尺寸都一样,似乎得先在MyButton定义一个带有[Parameter] attribute的变量,Post调用时再填入值,Post同样定义变量,Blog调用时再填入,每个环节都要这样做。

前面讲过父组件想将数据传递到子组件内的就是靠Parameter,有没有类似Parameter不过可以一次传递到底下所有组件的方法呢?

这时候就要用到CascadingValue这个组件了,cascading的意思是级联、喷泻,可以将其理解为由上而下注入,前端用的CSS全名就是Cascading Style Sheet(层级式样式表)。

我们先在BlogBase.razor.cs加入一个Property ColorStyle(注:笔者之前文件取名有误,这篇改为BlogBase.razor.cs),其值为"color: goldenrod"

接着在Blog.razor<CascadingValue Value="ColorStyle"><Post>包住。

再于PostBase.razor.cs定义同名变量,不过多了[CascadingParameter]attribute。

然后只要在想要套用的地方填写该变量即可。

MyButton也是一样的用法。

虽然每个组件都还是要定义一个变量去承接最上层来的变量,不过可以看到[CascadingParameter]省去了在PostBase.razor调用<MyButton>必须填值的步骤。

那如果有两个值要这样层层传递呢?没错,就是包两层<CascadingValue>即可,但真的写了会发现,怎么会套用两个color style呢?

[站长注:上下有差异,上面是站长调试结果,下面是原文截图]

因为<CascadingValue>认识的是变量类型,如果类型不同可以方便套用,但如果有两个string,则子元素只会套用最靠近的<CascadingValue>,以图片为例就是ColorStyle

为了解决这问题,可以使用里面的Name变量,如此一来组件之间就会认识这个<CascadingValue>的名字,如果子组件找不到该Name就会回传空白。

从上面的范例可以知道每次<CascadingValue>Blazor都会层层通知下层组件,但如果不希望每次都通知占用资源呢?可以用IsFixed,将其设为true,Blazor就不会去通知子组件了。

引用:

  1. Blazor cascading values and parameters
  2. Blazor multiple cascading parameters
  3. Blazor cascading values performance

注:本文代码通过 .NET 6 + Visual Studio 2022重构,可点击原文链接与重构后代码比较学习,谢谢阅读,支持原作者

留言

回复