Blazor C#：如何正确将子组件的YouTubeVideoUrl传递给父组件？

你遇到的核心问题是Blazor组件参数默认是单向数据流：父组件向子组件传递值，但子组件修改值后不会自动同步回父组件。当前你的实现只做了父→子的单向传递，没有处理子→父的回调，同时父组件的参数绑定写法也存在错误。

要实现子组件到父组件的参数同步，需要完成以下两步：

1. 修正子组件（OptionOne.razor），添加双向绑定的回调参数 #

Blazor的双向绑定依赖[Parameter]属性和对应的Changed事件回调。修改子组件代码，添加YouTubeVideoUrlChanged回调，确保输入框的值变化能通知父组件：

<div id="video-input">
    <!-- 使用@bind实现双向绑定，自动触发Changed回调 -->
    <input @bind="YouTubeVideoUrl" @bind:event="oninput" type="text" placeholder="Video URL">
    <button @onclick="InitiateYouTubeDownload" tabindex="5">OK</button>
</div>

@code {
    // 接收父组件传递的值
    [Parameter] 
    public string? YouTubeVideoUrl { get; set; }

    // 向父组件通知值变更的回调
    [Parameter] 
    public EventCallback<string> YouTubeVideoUrlChanged { get; set; }

    [Parameter] 
    public EventCallback<MouseEventArgs> InitiateYouTubeDownload { get; set; }
}

2. 修正父组件（TopicVideo.razor）的组件调用方式 #

父组件需要使用Blazor的双向绑定语法@bind-*，或者手动绑定值和回调事件。推荐使用简洁的双向绑定写法：

<!-- 使用@bind-YouTubeVideoUrl实现双向绑定，自动同步父子组件的值 -->
<OptionOne @bind-YouTubeVideoUrl="YouTubeVideoUrl" 
           InitiateYouTubeDownload="InitiateYouTubeDownload"></OptionOne>

@code {
    // 父组件的字段，会和子组件实时同步
    private string? YouTubeVideoUrl { get; set; }

    private async Task InitiateYouTubeDownload(MouseEventArgs e){ 
        // 这里可以直接使用YouTubeVideoUrl，已经和子组件同步
        // process
    }
}

手动绑定的替代写法（适用于需要自定义逻辑的场景） #

如果你需要在值变更时添加额外处理（比如URL格式验证），可以手动绑定值和回调：

<OptionOne YouTubeVideoUrl="YouTubeVideoUrl" 
           YouTubeVideoUrlChanged="OnYouTubeVideoUrlChanged"
           InitiateYouTubeDownload="InitiateYouTubeDownload"></OptionOne>

@code {
    private string? YouTubeVideoUrl { get; set; }

    private async Task OnYouTubeVideoUrlChanged(string newUrl)
    {
        // 自定义逻辑示例：验证URL格式
        if (!string.IsNullOrWhiteSpace(newUrl) && newUrl.StartsWith("https://www.youtube.com/"))
        {
            YouTubeVideoUrl = newUrl;
        }
    }

    private async Task InitiateYouTubeDownload(MouseEventArgs e){ 
        // process
    }
}

• 原来父组件中YouTubeVideoUrl="YouTubeVideoUrl"的写法是传递字符串字面量"YouTubeVideoUrl"，而非绑定字段，这也是导致父组件值为null的直接原因之一，必须使用@bind-*或者@YouTubeVideoUrl来绑定字段。
• Blazor的双向绑定是语法糖，会自动将@bind-PropertyName解析为PropertyName="Value"和PropertyNameChanged="ValueChangedCallback"。

内容的提问来源于stack exchange，提问作者Baslki