我發現vue中的$attrs對于組件設計來說是一個非常有幫助的東西。如果我有一個包裝“a”標簽的組件，我可以使用 $attrs 傳入所有這些本機 props，而無需將它們一一聲明為參數。例如，我有一個這樣的組件：<div>
<a href="@Href" onclick="@OnClick" class="@Classes" style="@Styles">@Content</a>
</div>我必須聲明“Href、OnClick、類、樣式”等參數。但我們知道標簽“a”具有大量其他屬性，例如“target、hreflang...”，更不用說“input”標簽等。我認為聲稱所有這些都是令人難以置信的長參數列表是愚蠢的。那么 Blazor 是否為我們開發者提供了類似的功能呢？
2 回答
慕姐8265434
TA貢獻1813條經驗 獲得超2個贊
是的，它確實。
您可以使用 Blazor 的新“splat”運算符來執行此操作。例如：
// MyComp
<div id=“@Id” @attributes=“InputAttributes”></div>
@code {
? ? [Parameter]?
? ? public string Id { get; set; }?
? ? [Parameter(CaptureUnmatchedValues = true)]
? ? public Dictionary<string, object> InputAttributes { get; set; }
}
根據上面的示例定義參數將使其收集組件上定義的與任何現有聲明的參數不匹配的任何屬性。
用法：
<MyComp Id=“foo” class=“myclass” />
將呈現：
<div id=“foo” class=“myclass”></div>
慕森王
TA貢獻1777條經驗 獲得超3個贊
是的
#接受任意參數 要定義接受任意屬性的組件，請使用 [Parameter] 屬性定義組件參數，并將 CaptureUnmatchedValues 屬性設置為 true。參數的類型必須可從 Dictionary<string, object> 分配。這意味著 IEnumerable<KeyValuePair<string, object>> 或 IReadOnlyDictionary<string, object> 也是選項。
@code?{
?????[Parameter(CaptureUnmatchedValues=?true)]?
?????????public?Dictionary<string,?object>?Attributes?{?get;?set;?}?
}[Parameter] 上的 CaptureUnmatchedValues 屬性允許該參數匹配與任何其他參數不匹配的所有屬性。組件只能使用 CaptureUnmatchedValues 定義單個參數。
使用@attributes渲染任意屬性
組件可以使用 @attributes 指令屬性將任意屬性傳遞給另一個組件或標記元素。@attributes 指令允許您指定要傳遞給標記元素或組件的屬性集合。這很有價值，因為指定為屬性的鍵值對集可以來自 .NET 集合，并且不需要在組件的源代碼中指定。
<input class="form-field" @attributes="Attributes" type="text" />
@code?{
????[Parameter(CaptureUnmatchedValues?=?true)]
???????public?Dictionary<string,?object>?Attributes?{?get;?set;?}?
}使用 @attributes 指令，Attribute 屬性的內容將“splatted”到輸入元素上。如果這導致屬性重復，則屬性的評估從左到右進行。在上面的示例中，如果屬性還包含類的值，它將取代 class="form-field"。如果屬性包含類型值，則該值將被 type="text" 取代。
- 2 回答
- 0 關注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消