如何修复“Vue.js 组件中的默认插槽原始 html 渲染”答案

【问题标题】：How to fix "default slot raw html rendering in Vue.js component"如何修复“Vue.js 组件中的默认插槽原始 html 渲染”
【发布时间】：2019-10-06 01:33:26
【问题描述】：

我有一个自定义输入组件并尝试使用 slot 将另一个元素传递给该组件，但是当使用任何 html 时，如父组件上的自定义输入组件标签内的简单按钮，内容呈现作为原始 html（如转义的 html 文本）

我试图在自定义输入组件的<slot></slot> 标记内编写 html 按钮代码，这工作正常，但是当从父组件传递时损坏！

自定义输入模板是这样的：

<template>
  <div class="form-group" :class="{ 'ltr ltr-input': ltr }">
    <textarea :id="id" :value="value" @change="input"></textarea>
    <label :for="id">{{ fieldLabel }}</label>
    <slot>
      <button>fallback</button>
    </slot>
  </div>
</template>

在父元素上：

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

这是上面代码结果的截图：

【问题讨论】：

你不应该为你的 Vue 组件元素标签使用原生 HTML 标签。在解析器看来，<TextArea> 与<textarea> 相同，因为标签不区分大小写。因此，<TextArea> 组件中的任何内容都将简单地呈现为原生 <textarea> 元素中的纯字符串。尝试创建一个 MCVE：这不是 <slot> 组件的预期行为，如果没有任何进一步的代码，就不可能查明哪里出了问题。
@Terry 谢谢你，你节省了我的时间，我不知道，只需更改我的组件名称，一切都很好，谢谢，如果你发表你的评论作为答案，我会接受它并关闭这个问题;-)
认为已经完成了 :) 很高兴我能够帮助您解决问题。

标签： javascript vuejs2 vue-component

【解决方案1】：

从我的评论中得到更多解释：您在 Vue 组件名称中使用了“保留”元素标签词，这可能解释了您遇到的奇怪现象。由于 HTML 标记名称不区分大小写，<TextArea> 被 Web 浏览器简单地解析为 <textarea>，并继承了该原生元素的所有默认呈现行为。这意味着您的 <TextArea> 标记之间的任何文本内容都将简单地呈现为纯文本，就像它们在本机 <textarea> 元素中一样。

为了避免这个问题，您应该始终努力将您的 Vue 组件命名为唯一：两个单词是一个好的开始，因为目前 HTML 标记名称不包含两个单词。因此，您可以将 <TextArea> 重命名为 <custom-textarea> 为 <v-textarea>，它应该可以工作：只要记住也要更新您的模板名称。

【讨论】：