当前位置：首页 > ds >正文

如何在 Vue 3 中实现一个自定义的 `v-html` 组件

ds 2025/7/5 22:43:16

引言

在 Vue.js 中，v-html 是一个非常有用的指令，用于将 HTML 字符串渲染到元素中。然而，由于它直接插入 HTML 内容，存在潜在的安全风险（如 XSS 攻击）。因此，了解其工作原理并实现一个安全的替代方案是非常重要的。

`v-html` 原理

v-html 的主要功能包括：

将字符串内容作为 HTML 插入到指定的 DOM 元素中。
不会进行任何的 HTML 转义，因此可以插入完整的 HTML 结构。
由于其直接插入 HTML 的特性，使用时需要非常小心，以防止 XSS 攻击。

实现一个自定义的 `v-html` 组件

为了实现一个安全的 HTML 渲染组件，我们可以使用 DOMParser 来解析和处理 HTML 内容。以下是一个详细的实现步骤。

步骤

定义一个 prop 来接收 HTML 字符串。
使用 DOMParser 解析 HTML 字符串。
将解析后的 DOM 内容插入到组件的模板中。
监听 prop 的变化，以便在内容变化时重新渲染。

实现代码

假设我们有一个 YHtml.vue 组件，我们将在这个组件中实现自定义的 v-html 功能。

<template><div ref="htmlContainer"></div>
</template><script setup lang="ts">
import { onMounted, ref, watch } from 'vue'// 定义一个 prop 来接收 HTML 字符串
const props = defineProps<{htmlContent: string
}>()// 获取对 DOM 元素的引用
const htmlContainer = ref<HTMLElement | null>(null)// 使用 DOMParser 解析 HTML 字符串并插入到容器中
const renderHtml = () => {if (htmlContainer.value) {const parser = new DOMParser()const doc = parser.parseFromString(props.htmlContent, 'text/html')const body = doc.body// 清空容器htmlContainer.value.innerHTML = ''// 将解析后的 HTML 内容插入到容器中Array.from(body.childNodes).forEach(node => {htmlContainer.value?.appendChild(node)})}
}// 在组件挂载时渲染 HTML
onMounted(() => {renderHtml()
})// 监听 htmlContent 的变化，重新渲染 HTML
watch(() => props.htmlContent, renderHtml)
</script><style scoped>
/* 添加样式 */
</style>

使用示例

假设你在父组件中使用 YHtml 组件，可以这样写：

<template><div><YHtml :htmlContent="htmlString" /></div>
</template><script setup lang="ts">
import YHtml from './components/YHtml.vue'
import { ref } from 'vue'const htmlString = ref('<p>这是一个 <strong>安全</strong> 的 HTML 内容。</p>')
</script>