Blazor 之 [Parameter] 和 @bind- 用法区别

4 周 ago
木它
1 minute

在 C# Blazor 中，[Parameter] 和 @bind- 是用于不同目的的特性和绑定机制。它们在组件之间传递数据时扮演不同的角色。下面是它们的区别和用法：

[Parameter]

  1. 用途：[Parameter] 特性用于定义一个组件的参数。它允许父组件向子组件传递数据。
  2. 用法：在子组件中，你可以通过在属性上使用 [Parameter] 特性来声明该属性是一个参数。例如：
   public class MyComponent : ComponentBase
   {
       [Parameter]
       public string Title { get; set; }
   }
  1. 数据流向：数据流是单向的，即从父组件流向子组件。父组件可以设置子组件的参数值，但子组件不能直接修改父组件的数据。
  2. 示例：在父组件中使用子组件时，可以这样传递参数：
   <MyComponent Title="Hello, World!" />

@bind-

  1. 用途：@bind- 是用于双向数据绑定的语法糖。它允许在组件和其属性之间进行双向数据绑定。
  2. 用法：@bind- 通常用于绑定输入控件的值，使得控件的值和组件的属性保持同步。例如：
   <input @bind-Value="name" />

这里，name 是一个组件中的属性，@bind-Value 会自动处理输入控件的 value 和 onchange 事件，以实现双向绑定。

  1. 数据流向：双向数据绑定意味着数据可以从组件流向控件，也可以从控件流回组件。
  2. 示例：在组件中定义一个属性，然后在 Razor 页面中使用：
   @code {
       private string name;
   }
   <input @bind-Value="name" />
   <p>You entered: @name</p>

总结

  • [Parameter] 用于定义组件的输入参数，数据流是单向的。
  • @bind- 用于实现双向数据绑定，通常用于表单控件，使得控件的值和组件的属性保持同步。