Vue自定义textarea组件model不更新问题求助

嘿，我来帮你捋捋这个问题～首先得明确一个核心点：原生的textarea是纯文本输入控件，它根本不会解析HTML内容——哪怕你给它绑定的是带HTML标签的数据，它也只会把这些标签当成普通字符串显示出来，而不是渲染成对应的HTML元素。这可能是你觉得“内容未能正常显示”的第一个原因。

接下来咱们一步步解决问题：

1. 先确认自定义组件的v-model绑定是否正确 #

自定义组件要实现v-model双向绑定，必须正确处理prop和事件：

• 如果是Vue 3，组件需要接收modelValue prop，并触发update:modelValue事件
• 如果是Vue 2，组件接收value prop，触发input事件

举个Vue 3的自定义textarea组件示例：

<template>
  <!-- 绑定value到modelValue，输入时触发更新事件 -->
  <textarea 
    :value="modelValue" 
    @input="$emit('update:modelValue', $event.target.value)"
  ></textarea>
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

父组件里这样用：

<HtmlTextarea v-model="message" />

如果之前你的组件没有正确实现这个双向绑定逻辑，哪怕数据在devtools里更新了，也不会同步到textarea的显示上。

2. 关于HTML内容的显示需求 #

如果你的组件目标是既能渲染HTML内容，又能让用户编辑，那原生textarea肯定满足不了——你得换成contenteditable="true"的div来做富文本编辑区域。

给你一个Vue 3的富文本编辑组件示例：

<template>
  <div 
    contenteditable="true"
    @input="$emit('update:modelValue', $event.target.innerHTML)"
    v-html="modelValue"
    style="border:1px solid #ccc; min-height:100px; padding:8px;"
  ></div>
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

这样当你设置this.message='<span id="foo">bar</span>'时，div会正确渲染出带span标签的内容，同时用户编辑后的HTML内容也会同步回你的模型数据里。

3. 关于Vue.set的尝试 #

如果你之前用对象存储数据，比如this.form.message=...，但form是后来动态添加的属性，那确实需要用Vue.set；但如果message是在组件data里提前声明好的根级属性，那直接赋值就会触发响应式更新，不需要额外用Vue.set。比如：

// 正确的data声明，message会被Vue做响应式处理
data() {
  return {
    message: ''
  }
}

总结一下：

• 原生textarea只能显示纯文本，无法渲染HTML
• 自定义组件的v-model必须正确实现prop和事件的双向绑定，否则数据更新不会同步到视图
• 若需支持HTML渲染和编辑，改用contenteditable的div替代textarea

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