Blazor 单向绑定

目前，我们在页面内部显示了一个组件，但是内容是静态的。我们真正想要的是能够动态输出内容。

如果我们更改/Components/MyFirstComponent.razor的内容，我们可以引入一个私有成员，并使用@符号输出该成员的值。

    <div>
      CurrentCounterValue in MyFirstComponent is @CurrentCounterValue
    </div>
    @code {
      private int CurrentCounterValue = 42;
    }

通过参数接收值

组件中的CurrentCounterValue始终显示值“ 42”，但是如果我们希望父组件告诉我们要显示哪个值呢？为此，请创建一个名为MySecondComponent的新组件，并从MyFirstComponent复制标记，然后将私有成员更改为公共属性。

    <div>
      CurrentCounterValue in MySecondComponent is @CurrentCounterValue
    </div>
    @code {
      public int CurrentCounterValue { get; set; }
    }

编辑“Counter”页面，添加MySecondComponent组件，然后设置其CurrentCounterValue，如下所示：

<MySecondComponent CurrentCounterValue=@currentCount/>

现在，运行应用程序并导航到“Counter”页面将在浏览器的控制台窗口中显示错误。

WASM：System.InvalidOperationException：类型为“ OneWayBinding.Client.Components.MySecondComponent”的对象具有与名称“ CurrentCounterValue”匹配的属性，但没有应用[ParameterAttribute]或[CascadingParameterAttribute]。

这清楚地告诉我们缺少了什么。要将参数添加到组件，我们必须使用[Parameter]属性装饰组件的属性。

    <div>
      CurrentCounterValue in MySecondComponent is @CurrentCounterValue
    </div>
    @code {
      [Parameter]
      public int CurrentCounterValue { get; set; }
    }

这通知Blazor我们希望组件上的参数可以通过看起来像HTML属性的参数进行设置。无论何时重新渲染父组件，Blazor也会重新渲染它提供参数值的任何子组件。这样可以确保子组件被重新渲染，以表示通过[Parameter]装饰属性传递给组件的状态的任何可能变化。

如果再次运行我们的应用程序并导航到“计数器”页面，我们将看到，每当“Counter”页面中的currentCount发生更改时，它将通过其CurrentCounterValue属性将该更改下推到我们的嵌入式组件中。

注意：参数必须是public属性。