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

Posted 2023-04-12

【中文标题】Blazor 是不是有一些机制像 vue 中的 $attrs 一样工作？

【英文标题】：Does Blazor have some mechanism working like $attrs in vue?Blazor 是否有一些机制像 vue 中的 $attrs 一样工作？

【发布时间】：2019-12-16 23:49:35

【问题描述】：

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

【问题讨论】：

onclick 不是属性。它是一个指令，前面应该有 @ 标记。我认为，从一开始就可以传递一组参数。但是现在您可以使用@attributes 指令将参数集合传递给元素或组件。

好的，非常感谢。我应该关注他们的新功能。

【参考方案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>

【讨论】：

这正是我所需要的。谢谢你的详细信息。

@SillyJumper 如果它解决了您的问题，您介意将其标记为答案，以便其他人知道它很有用。

当然，对不起，我什至用谷歌搜索了如何标记 anwser。我想这就是为什么我是一个愚蠢的跳线......

如果它混淆了任何人，html id 属性（全部小写）也可以直接放在 Razor 组件标记中，而不使用 Id（大写“I”）成员参数@代码块。因此，换句话说，您将通过以下方式获得相同的结果：首先，在 razor 组件文件中，从 html <div> 组件中删除 id="@Id"，然后从 @code 块中删除成员 Parameter Id。然后在使用它时，只需像普通的 html 属性一样指定id 属性，就像使用class 属性一样。所以：<MyComp id="foo" class="myClass" />.

这就是我要找的东西

【参考方案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" 取代。

【讨论】：

是的，我很感激 Blazor 的开发人员总能赶上我们的需求。