Vue新增内容后设置v-model为空无法重置输入框如何解决

你现在清空标题失效是两个写法问题叠加导致的：

1. 父组件给PostEditor传值时错误给v-model加了冒号，写成了:v-model="sectionTitle"。这种写法是单向给子组件传递了一个名为v-model的自定义属性，完全不是Vue默认的v-model双向绑定语法——子组件触发update:modelValue时虽然能修改父组件的sectionTitle变量，但父组件修改变量时不会把更新同步回子组件。
2. 子组件内的标题输入框只监听了input事件向上传值，没有把父组件传入的modelValue绑定到输入框的value属性上，就算父组件值更新了，输入框的显示值也不会跟着变。

你之前能正常重置富文本内容，是因为直接通过ref调用了quill实例的setHTML方法操作底层实例，没有走双向绑定逻辑，所以没暴露这个问题。

按以下步骤调整代码即可：

• 修正父组件PostEditor的绑定写法，去掉v-model前的冒号，使用标准双向绑定语法：

<PostEditor 
    ref="editor"
    v-model="sectionTitle" 
    v-model:cover="programCover" 
    v-model:content="programContent"
>
</PostEditor>

• 修改子组件内的标题input标签，新增:value绑定，把父组件传入的modelValue和输入框值关联起来：

<input 
    type="text" 
    class="form-control mb-2 rounded-0" 
    placeholder="Title" 
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
>

• （推荐）在子组件的script中显式声明props，避免隐式传值的告警，也让数据流更清晰：

export default {
    props: {
        modelValue: {
            type: String,
            default: ''
        },
        cover: String,
        content: String
    },
    // 保留你原有的其余代码，比如ref、组件注册逻辑等
}

改完之后再执行addSection方法里的this.sectionTitle = ''，值会通过双向绑定同步到子组件输入框，自动完成清空，不需要额外操作DOM。

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