如何修复“ Vue.js组件中的默认插槽原始html呈现”

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>会被Web浏览器简单地解析为<textarea>，并继承该本地元素的所有默认呈现行为。这意味着<TextArea>标记之间的任何文本内容都将简单地呈现为纯文本，就像它们在本机<textarea>元素中一样。

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