通过为自定义组件添加 @bind-Value 支持（即 Value 参数 + ValueChanged 回调），可让多个同类型组件各自维护独立状态，并将变更同步回父组件，实现数据隔离与集中管理。
通过为自定义组件添加 `@bind-value` 支持（即 `value` 参数 + `valuechanged` 回调），可让多个同类型组件各自维护独立状态，并将变更同步回父组件，实现数据隔离与集中管理。
在 Blazor 中，若需在同一页面多次使用相同组件（如 会导致所有实例共用 result 字段，无法区分数据来源。
✅ 正确做法：实现双向绑定支持（@bind-Value）
Blazor 的 @bind-Value 语法本质是语法糖，等价于同时传递 Value 参数和 ValueChanged 事件回调。因此，需在子组件中：
- 声明 [Parameter] public required string Value { get; set; }
- 声明 [Parameter] public required EventCallback
ValueChanged { get; set; } - 在用户操作（如点击“finish”）时，调用 ValueChanged.InvokeAsync(value) 主动通知父组件
以下是改进后的 TextArea.razor 完整代码：
@inject IJSRuntime JsRuntime @inject NavigationManager NavManager
|
|
|
? 注意：OnInitialized 中显式赋值 result = Value 是必要的，否则初始值可能为空，导致 @bind="result" 无法反映父组件传入的默认值。
? 父组件用法：声明独立字段 + 使用 @bind-Value
在父组件中，为每个
<textarea></textarea><textarea></textarea><textarea></textarea>
@code {
private string Value1 { get; set; } = string.Empty;
private string Value2 { get; set; } = string.Empty;
private string Value3 { get; set; } = string.Empty;
// 可随时访问三份独立结果，例如提交时：
private void SubmitAll()
{
Console.WriteLine($"Text 1: {Value1}");
Console.WriteLine($"Text 2: {Value2}");
Console.WriteLine($"Text 3: {Value3}");
}
}
⚠️ 注意事项与最佳实践
- ID 冲突风险：当前组件内硬编码了 id="custom-textarea"，若多次渲染会违反 HTML ID 唯一性规范。建议移除 id，或动态生成唯一 ID（如结合 Guid.NewGuid() 或 @key）。
- JS 交互隔离：makeBold() 是全局 JS 函数，目前未指定作用域。若需对特定 textarea 生效，应改用 ElementReference + IJSRuntime 调用，传入对应元素引用。
- 响应式更新：EventCallback 自动触发父组件重新渲染，无需手动调用 StateHasChanged()。
-
可扩展性：此模式适用于任意输入类组件（如
、 ），是 Blazor 组件通信的标准推荐方式。
通过以上改造，你不仅解决了多实例数据隔离问题，还遵循了 Blazor 的响应式设计原则，使组件更健壮、可复用、易测试。
