Vue3 之在自定义组件中渲染 HTML 内容
老牛浏览 766评论 0发表于
1. 问题说明
一般来说，要渲染 HTML 内容我们用 v-html 指令传递内容就可以了：
html
<div v-html="<p>段落</p>"></div>如果这里不是一个 div 标签，而是一个自定义组件：
html
<CustomElement v-html="<p>段落</p>"></CustomElement>在服务端渲染（SSR）时，HTML 内容是不会被渲染出来的。
然而有时候还真有这样的应用场景，比如在展示文章内容时，我们经常会自定义其展示样式，用 JavaScript 处理代码块的一键复制等。将内容放到自定义组件中统一处理显然是个不错的选择。怎么实现呢？
2. 解决方案
既然 v-html 作用在自定义组件上有问题，我们通过 props 传递即可：
Typography.vue
html
<template>
<div v-if="htmlContent" v-bind="$attrs" v-html="html"></div>
<div v-else v-bind="$attrs">
<slot></slot>
</div>
</template>
<script setup>
defineOptions({
inheritAttrs: false
});
const props = defineProps({
html: String
});
</script>有两种使用方式：
在 Vue 组件中，通过插槽传递内容：
html
<Typography>
<p>段落</p>
<Typography>对于博客、CMS 等存储在数据库中的 HTML 内容，通过 props 传递内容：
html
<Typography html="<p>段落</p>" />点赞
收藏
暂无评论，快来发表评论吧~
