javascript - 如何修复 "default slot raw html rendering in Vue.js component"

Question

我有一个自定义输入组件，并尝试使用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>

这是上述代码结果的屏幕截图:

Answer 1

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

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