最清晰可控的方式是用 props 传标题和正文，子组件用 defineprops 声明 title 和 content 字符串类型；富文本应通过插槽注入组件而非 v-html；关闭与确认需通过自定义事件实现双向通信；props 不可修改，编辑时应创建本地 ref 副本。
直接用 props 把标题和正文传进模态框组件，是最清晰、最可控的方式。关键不是“能不能传”，而是怎么传得安全、可维护、不踩坑。
标题和正文作为 props 明确接收
子组件（Modal）用 defineProps 声明两个字段，比如 title 和 content，类型建议用字符串（也可支持 HTML 字符串或插槽，后文会提）：
- 父组件传值时写成
<mymodal :title="dialogTitle" :content="dialogContent"></mymodal> - 子组件中定义：
const props = defineProps({ title: { type: String, default: '提示' }, content: { type: String, default: '' } }) - 模板里直接用
{{ props.title }}和{{ props.content }}渲染，无需额外逻辑
支持富文本或动态结构内容
如果正文不只是纯文本，比如要渲染带链接、列表或按钮的 HTML，不推荐直接用 v-html（有 XSS 风险），更稳妥的做法是：
- 把正文封装成一个独立的 Vue 组件（如
DialogBody.vue），通过 插槽（slot） 注入到 Modal 中 - 父组件这样用：
<mymodal><template><dialogbody></dialogbody></template></mymodal> - Modal 组件内部用
<slot name="body"></slot>接收，既保持结构清晰，又避免字符串解析风险
配合事件实现关闭与确认联动
标题和正文只是静态内容，真正交互靠事件。Modal 组件应向外暴露 自定义事件，比如 close 和 confirm：
- 子组件内触发：
$emit('close')或$emit('confirm', { data: 'xxx' }) - 父组件监听：
<mymodal false></mymodal> - 这样标题/正文由父组件控制，关闭/确认行为也由父组件响应，职责分明
避免常见错误
props 是只读的，别在 Modal 组件里尝试修改 props.title；如果需要临时编辑标题（比如表单弹窗），应该用 ref 或 computed + v-model 创建本地副本：
- 例如：
const localTitle = ref(props.title)，再绑定到输入框 - 确认提交时，再把
localTitle.value通过$emit通知父组件更新 - 这样既不破坏单向数据流，又满足编辑需求
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
