本文详解如何在 Vue 3 组合式 API 中，通过 v-model 实现 TinyMCE 编辑器组件与父组件之间的双向数据同步，包括自定义 v-model:text 的正确写法、事件触发机制及可复用的最佳实践。
本文详解如何在 vue 3 组合式 api 中，通过 `v-model` 实现 tinymce 编辑器组件与父组件之间的双向数据同步，包括自定义 `v-model:text` 的正确写法、事件触发机制及可复用的最佳实践。
要在 Vue 3 中让 TinyMCE 编辑器的内容实时回传至父组件（如 TestComponent.vue），关键在于建立响应式的双向绑定，而非单向传递 props。Vue 的 v-model 机制正是为此设计：它本质是 :propName + @update:propName 的语法糖，需子组件主动配合实现。
首先，在 TinyMCE.vue 中需完成两件事：
- 接收 text prop 并监听编辑器内容变化；
- 通过 defineEmits 声明 update:text 事件，并在内容变更时触发。
以下是修正后的完整子组件代码（含 TinyMCE 内容同步逻辑）：
<!-- TinyMCE.vue -->
<template>
<div>
<p>This will be Editor JS</p>
<div name="editor">
<Editor
api-key=""
:init="{
plugins: 'lists link image table code help wordcount',
setup: (editor) => {
// 监听内容变化并触发更新事件
editor.on('input change UndoRedo', () => {
emit('update:text', editor.getContent());
});
}
}"
/>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import Editor from '@tinymce/tinymce-vue'
const props = defineProps({
text: String
})
// ✅ 正确声明 emits
const emit = defineEmits(['update:text'])
// 可选：提供 v-model 语法支持（推荐）
// 注意：此处使用 props.text 而非 props.value.test（原答案有误）
const modelValue = computed({
get() {
return props.text
},
set(value) {
emit('update:text', value)
}
})
</script>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer下载递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 原答案中 props.value.test 是错误写法（props 中无 value 字段），应直接使用 props.text；
- TinyMCE 的内容需通过 editor.getContent() 获取 HTML 字符串；
- 使用 editor.on('input change UndoRedo') 覆盖常见编辑场景（输入、格式变更、撤销重做），避免仅依赖 input 导致丢失部分更新。
在父组件 TestComponent.vue 中，即可简洁使用 v-model:text：
<!-- TestComponent.vue -->
<template>
<div class="h-screen flex w-screen flex-col items-center justify-center gap-5">
<div>hello from test</div>
<div class="h-[300px] w-[300px]">
<!-- ✅ 使用 v-model:text 绑定 -->
<TinyMCE v-model:text="text" />
<div
name="result"
class="flex h-[300px] w-[300px] items-center justify-center border-2 border-black"
v-html="text"
></div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import TinyMCE from './TinyMCE.vue'
const text = ref('')
</script>你也可以选择显式写法（等价但更冗长）：
<TinyMCE :text="text" @update:text="text = $event" />
✅ 总结：
- v-model:text 是 :text + @update:text 的语法糖，子组件必须 emit('update:text', newValue) 才能生效；
- TinyMCE 需在 setup 钩子中注册事件监听器，主动推送内容变更；
- 避免在子组件内维护独立 ref，所有状态应由父组件统一管理，确保响应链清晰可靠；
- 安全提示：生产环境务必移除空 api-key，改用服务端代理或环境变量注入。
这样，编辑器中的任意修改都会即时同步到 text 响应式变量，并自动渲染至下方 v-html 区域——真正实现「所见即所得」的数据流闭环。
