Vue.js如何在子组件的slot插槽中动态渲染HTML内容

问题根因 #

Vue默认会对插值语法({{ }})渲染的内容做HTML转义处理，避免XSS攻击，因此你直接将带HTML标签的字符串通过插值传入插槽时，标签会被当做纯文本显示，不会被浏览器解析为DOM节点。

方案1：父组件插槽内使用v-html渲染（无需修改子组件，推荐） #

你只需要在父组件调用子组件时，在插槽内部使用带v-html指令的元素包裹HTML内容即可：
父组件模板示例：

<template>
  <!-- 其他代码 -->
  <Alert :type="alert.error">
    <!-- 用v-html指令渲染HTML字符串 -->
    <span v-html="alert.message"></span>
  </Alert>
</template>

方案2：改造子组件支持直接传入HTML内容 #

如果希望调用更简洁，可以将子组件的插槽改为Prop接收HTML内容，子组件内部自行用v-html渲染：

修改子组件（Alert.vue） #

<template>
    <div :class="type" class="message" v-if="type" v-html="htmlContent">
    </div>
</template>

<script>
export default {
    props: ['type', 'htmlContent'],
}
</script>

父组件调用 #

<template>
  <!-- 其他代码 -->
  <Alert :type="alert.error" :html-content="alert.message" />
</template>

安全提示 #

v-html存在XSS注入风险，如果你的HTML内容来自不可信的用户输入、未校验的第三方接口，务必先使用XSS过滤工具对内容做 sanitize 处理后再渲染，避免恶意脚本执行。 #

内容的提问来源于stack exchange，提问作者Mr.Singh