Link to the original text ：https://blazor-university.com/components/replacing-attributes-on-child-components/

Replace the properties of the subcomponent

Source code ^[1]

up to now , We've seen how to create code generated properties ^[2], And how to catch unexpected parameters ^[3]. In addition to these two technologies ,Blazor It also allows us to rewrite / Replace existing properties in subcomponents .

Take the following page tags ：

<ChildComponent first="consumer-value-1" second="consumer-value-2" />

It uses the following subcomponents ：

<div @attributes=AllOtherAttributes>
  Right-click and inspect the HTML for this element to see the results!
</div>

@code
{
  [Parameter(CaptureUnmatchedValues=true)]
  public Dictionary<string, object> AllOtherAttributes { get; set; }
}

Just like the properties we generated in the code ^[4] As seen in ,ChildComponent The properties provided by the user （ The first and the second ） Capture our parameters AllOtherAttributes in , And right @attributes=AllOtherAttributes The call of will indicate Blazor stay Dictionary<string, object> Output name in / It's worth it . The previous code will output the following HTML.

<div first="consumer-value-1" second="consumer-value-2">
  Right-click and inspect the HTML for this element to see the results!
</div>

Replace sub attribute

If we want to help first and second Specify default values to output what to do if the user does not provide them ？ If no value is set , It may be easy to rewrite SetParametersAsync^[5] And insert the value , But there's a simpler way ！

All we have to do is write out our default value as part of the sub component tag ,@attributes= The instruction will overwrite them with any value passed by the user . therefore , If we change the subcomponent to specify some default attribute values , As shown below ：

<div first="1" second="2" third="3" fourth="4"  @attributes=AllOtherAttributes>
  Right-click and inspect the HTML for this element to see the results!
</div>

Then we can replace the default values of the component like this ：

<ChildComponent first="consumer-value-1" second="consumer-value-2" />

This will present the following HTML：

<div first="consumer-value-1" second="consumer-value-2" third="3" fourth="4">
  Right-click and inspect the HTML for this element to see the results!
</div>

Our subcomponent will always render all four of its HTML attribute , But it will also allow users to replace their values .

Protection properties are not replaced

In some cases , We may want to allow the user of the component to replace some properties , But we want to protect other properties from being changed . for example ：

<input class="form-control" type="number" @attributes=AllOtherAttributes />

In this hypothetical InputNumber Control , We want to allow our users to replace the default CSS Class properties , But I don't want them to accidentally type from number Change to checkbox.

stay Blazor in , our @attributes= The position of the command is very important . Any attribute before the instruction （ Above or to the left ） Can be replaced by the user , But after it （ Below or to the right ） All properties of are protected , So that its value is not replaced .

In view of the following marks ：

<ChildComponent
  first="consumer-value-1"
  second="consumer-value-2"
  inserted="consumer-inserted-value" />

Then adjust @attributes= In our ChildComponent The location in will provide us with the following output ：

// Example 1
<div
  @attributes=AllOtherAttributes
  first="1"
  second="2" />

// Generated HTML
<div
  inserted="consumer-inserted-value
  first="1"
  second="2" />

// Example 2
<div
  first="1"
  @attributes=AllOtherAttributes
  second="2" />

// Generated HTML
<div
  first="consumer-value-1"
  inserted="consumer-inserted-value
  second="2" />

// Example 3
<div
  first="1"
  second="2"
  @attributes=AllOtherAttributes />

// Generated HTML
<div
  first="consumer-value-1"
  second="consumer-value-2"
  inserted="consumer-inserted-value />

R.I.P. The default value is

A simple way to remember which values take precedence is to use “R.I.P. Method ”.

@attributes= The directive will always insert additional value from the user , So it will I The meaning of deemed insertion .I Every previous attribute value can be replaced (R),I Every subsequent attribute value is protected (P).

<div first="1" second="2" @attributes=AllOtherAttributes third="3" fourth="4" />

Reference material

[1]

Source code : https://blazor-university.com/components/replacing-attributes-on-child-components/