Day 12 Cascading values and parameters

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

我们目前建立了3个Component，Blog、Post及MyButton，如果想让3个Component的字体颜色或是尺寸都一样，似乎得先在MyButton定义一个带有[Parameter] attribute的变数，Post呼叫时再填入值，Post同样定义变数，Blog呼叫时再填入，每个环节都要这样做。

前面讲过Parent component想将资料传递到Child component内的就是靠Parameter，有没有类似Parameter不过可以一次传递到底下所有component的方法呢？

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

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

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

再於PostBase.razor.cs定义同名变数，不过多了[CascadingParameter] attribute。

然後只要在想要套用的地方置入该变数即可。

MyButton也是一样的用法。

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

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

因为<CascadingValue>认识的是变数型别，如果型别不同可以无痛套用，但如果有两个string，则子元素只会套用最靠近的<CascadingValue>，以图片为例就是ColorStyle。

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

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

Ref: Blazor cascading values and parameters

Ref: Blazor multiple cascading parameters

Ref: Blazor cascading values performance