如何修复Vue.js组件中默认插槽HTML内容被原样渲染的问题

嘿，我一眼就看出问题所在了——你的自定义组件名字TextArea和原生HTML的<textarea>标签撞车了！

HTML标签是不区分大小写的，所以你在父组件里写的<TextArea>会被浏览器自动解析成原生的<textarea>标签。而原生textarea内部的内容会被当作文本值处理，所有HTML标签都会被转义成纯文本显示，这就是为什么你传的按钮变成了一堆代码文本的原因。

而你在组件内部插槽里写的默认按钮能正常显示，是因为那时候渲染的是你自定义组件的模板，不是原生textarea。

解决方法 #

方法1：修改组件名，避开原生标签 #

最简单的办法就是给你的自定义组件换个名字，比如CustomTextArea或者AppTextArea，彻底避免冲突。

修改自定义组件的name选项（或者文件名）：

<script>
export default {
  name: 'CustomTextArea', // 改个独特的名字
  props: ['id', 'value', 'fieldLabel', 'ltr', 'required'],
  // 你的其他逻辑...
}
</script>

然后在父组件里用新名字调用：

<CustomTextArea id="message" v-model="message" label="message" required>
  <button type="submit">Submit</button>
</CustomTextArea>

方法2：使用短横线分隔的组件标签 #

如果你不想改组件名，也可以在父组件模板里用短横线形式的标签名。Vue规定，在DOM模板中（直接写在HTML文件里的模板），自定义组件必须用短横线分隔的命名方式，这样浏览器就不会把它识别成原生标签了。

父组件里改成这样：

<text-area id="message" v-model="message" label="message" required>
  <button type="submit">Submit</button>
</text-area>

额外检查：确保组件正确注册 #

最后别忘了确认你在父组件里已经正确导入并注册了自定义组件，比如：

<script>
// 导入组件（路径根据你的项目结构调整）
import CustomTextArea from './components/CustomTextArea.vue'

export default {
  components: {
    CustomTextArea // 注册组件
  },
  data() {
    return {
      message: ''
    }
  }
}
</script>

这样处理之后，父组件传递的按钮应该就能正常渲染成元素，而不是转义文本了！

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