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

Question

我发现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 是否为我们开发者提供了类似的功能呢？

Answer 1

是的，它确实。

您可以使用 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>

Answer 2

是的

#接受任意参数 要定义接受任意属性的组件，请使用 [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" 取代。