在Blazor中,可以使用属性来在组件之间传递值。以下是一个示例:
首先,创建一个父组件(ParentComponent.razor),其中包含一个子组件(ChildComponent.razor)和一个按钮。父组件将一个整数值传递给子组件,子组件将该值加倍并返回给父组件。
ParentComponent.razor:
Parent Component
Value from child component: @result
@code {
int value = 10;
int result;
void HandleValueChanged(int newValue)
{
result = newValue;
}
void DoubleValue()
{
value *= 2;
}
}
ChildComponent.razor:
Child Component
Received value: @Value
@code {
[Parameter]
public int Value { get; set; }
[Parameter]
public EventCallback OnValueChanged { get; set; }
void DoubleValue()
{
int doubledValue = Value * 2;
OnValueChanged.InvokeAsync(doubledValue);
}
}
在这个示例中,父组件(ParentComponent)将一个整数值传递给子组件(ChildComponent)的Value
属性。子组件在按钮点击事件中将该值加倍,并通过OnValueChanged
事件将结果传递回父组件。父组件接收到子组件的值后,将其存储在result
变量中,并在页面上显示。
当父组件的按钮被点击时,value
变量的值会加倍。这将触发子组件的OnValueChanged
事件,子组件将加倍后的值传递回父组件。父组件接收到新值后,将其存储在result
变量中,并在页面上显示。
这是一个简单的示例,演示了如何在Blazor组件之间传递值。你可以根据自己的需求进行扩展和修改。