Vue 组件通信如何通过 Props 传递富媒体内容在子组件中安全渲染

Vue中安全渲染富媒体需区分数据可信度：可信结构化数据可解构使用，UGC须DOMPurify清洗，第三方嵌入用iframe/SDK；props强约束类型与格式，禁用v-html直渲，优先语义化标签与事件抽象，复杂场景用作用域插槽移交渲染权。

Vue 中通过 Props 传递富媒体内容（如 HTML 字符串、图片 URL、视频链接等）并安全渲染，关键在于明确区分“结构化数据”与“可执行内容”，避免直接 v-html 渲染不可信来源，同时保留语义和交互能力。这不是单纯传个字符串就能解决的问题，而是涉及数据建模、校验、沙箱控制和渲染策略的组合实践。

明确富媒体内容的类型与可信边界

富媒体不是“一段 HTML 就完事”。先分类再处理：

1. 可信结构化数据：如 CMS 后台配置的图文卡片，字段明确（title、coverUrl、desc、videoSrc），内容经后台审核或白名单过滤，适合直接解构使用
2. 用户生成内容（UGC）：如评论区富文本输入，含任意标签、内联样式、script 风险，必须清洗后才能渲染
3. 第三方嵌入代码：如 YouTube iframe、微博微博卡，需用 <iframe> 或最新 SDK 加载，禁止拼接 HTML 字符串

Props 定义要约束类型、提供默认值、拒绝非法格式

子组件不能无条件接收任何字符串。用对象式 props 做强约束：

1. 对图片 URL：声明 type: String + validator 检查是否以 https:// 开头且扩展名在 ['.jpg', '.png', '.webp'] 中
2. 对视频地址：限定为 type: String，且只接受已知平台格式（如 https://www.youtube.com/embed/xxx）
3. 对 HTML 片段：不直接接收 raw HTML；改用 htmlContent: { type: Object, required: true }，约定为预处理后的安全 AST 或纯文本+标记数组（如 { text: '加粗', bold: true }）
4. 所有富媒体字段都设 default: () => ({}) 或空字符串，防止 undefined 导致模板报错

子组件中不滥用 v-html，优先用语义化渲染逻辑

即使 props 校验通过，也不应无脑 v-html。更安全的做法是：

1. 用 <img :src="props.coverUrl" :> 替代 v-html 插入 img 标签
2. 视频用 <video :src="props.videoSrc" controls> 或封装 <YouTubePlayer :video-id="props.ytId" />
3. 若真需渲染简单 HTML（如后台富文本），引入 DOMPurify，在 mounted 中清洗后赋值：this.safeHtml = DOMPurify.sanitize(props.rawHtml)，再 v-html="safeHtml"
4. 对含交互的富媒体（如带按钮的卡片），把行为抽象为事件：子组件只渲染按钮 UI，点击时 $emit('action', { type: 'share', payload: ... })，由父组件决定跳转或调 API

配合插槽提升灵活性与安全性

当富媒体结构复杂、变化频繁时，props 会迅速臃肿。此时用作用域插槽更可控：

1. 父组件传入结构化数据，子组件只负责布局容器和基础样式
2. 用 <slot name="media" :item="item"></slot> 让父组件决定如何渲染 media 区域
3. 父组件可在 slot 中使用自己的安全渲染逻辑（如自定义 markdown 解析器、受控 iframe 组件），子组件不接触原始 HTML
4. 既复用子组件的骨架，又把富媒体的解析权和风险控制权留在上层