Blazor 是否有一些机制像 vue 中的 $attrs 一样工作？

Question

我发现 vue 中的 $attrs 对组件设计很有帮助。如果我有一个包装了“a”标签的组件，我可以使用 $attrs 传入所有这些原生道具，而无需将它们一一声明为参数。例如，我有一个这样的组件：

<div>
    <a href="@Href" onclick="@OnClick" class="@Classes" style="@Styles">@Content</a>
</div>

我必须声明“Href、OnClick、Classes、Styles”等参数。但是我们知道标签“a”还有大量的其他属性，比如“target, hreflang...”，更不用说“input”标签了。我认为将所有这些都称为令人难以置信的长参数列表是愚蠢的。

那么 Blazor 是否为我们开发者提供了类似的功能？

Answer 1

是的，确实如此。

您可以使用 Blazor 的新 ‘splat’ operator 来执行此操作。例如：

// 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>

Answer 2

是的，来自ASP.NET blog

#接受任意参数 定义一个接受的组件 任意属性使用 [Parameter] 属性，其 CaptureUnmatchedValues 属性设置为 真的。参数的类型必须可以从 字典。这意味着 IEnumerable> 或 IReadOnlyDictionary 也是选项。

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

[Parameter] 上的 CaptureUnmatchedValues 属性允许该参数 匹配不匹配任何其他参数的所有属性。一种 组件只能定义一个参数 捕获UnmatchedValues。

使用@attributes 渲染任意属性

一个组件可以通过 任意属性到另一个组件或标记元素使用 @attributes 指令属性。 @attributes 指令允许您 指定要传递给标记元素的属性集合或 零件。这很有价值，因为键值对的集合 指定为属性可以来自 .NET 集合，但不 需要在组件的源码中指定。

<input class="form-field" @attributes="Attributes" type="text" />

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

使用@attributes 指令获取属性属性的内容 “喷溅”到输入元素上。如果这导致重复 属性，然后属性的评估从左到右进行。 在上面的示例中，如果 Attributes 还包含类它的值 将取代 class="form-field"。如果 Attributes 包含一个值 对于 type 那么它将被 type="text" 取代。