Vue组件双向绑定问题：无法获取TinyMCE子组件文本内容

我参考Vue和TinyMCE Vue集成文档，尝试实现自定义TinyMCE编辑器组件并通过v-model完成父子组件双向绑定，但父组件始终无法获取子组件的文本内容。以下是我的代码实现：

子组件（TinyMCE编辑器）代码 #

<template>
  <div>
    <p>This will be Editor JS</p>
    <div name="editor">
      <Editor
        :value="modelValue"
         @change="$emit('update:modelValue', $event.target.value)"
        api-key="key"
        :init="{
          plugins: 'lists link image table code help wordcount'
        }"
      />
      <button>show text</button>
      <p>results</p>
      <div v-html="text"></div>
    </div>
  </div>
</template>

<script setup>
// FIXME HIDE THE API KEY

import Editor from '@tinymce/tinymce-vue'
import { defineProps, defineEmits } from 'vue'
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<style lang="scss" scoped></style>

父组件代码 #

<template>
  <div class="h-sceen flex w-screen flex-col items-center justify-center gap-5">
    <div>hello from test</div>
    <div class="h-[300px] w-[300px]">
      <TinyMCE v-model:text="text" @update:modelValue="handleTextUpdate"></TinyMCE>
      <div
        v-html="text"
        name="result"
        class="flex h-[300px] w-[300px] items-center justify-center border-2 border-black"
      ></div>
      <button @click="console.log(text.value)">See the text</button>
    </div>
  </div>
</template>

<script setup>
import TinyMCE from './TinyMCE.vue'
import { ref } from 'vue'
const text = ref('')
const handleTextUpdate = (newValue) => {
  text.value = newValue
}
</script>

<style lang="scss" scoped></style>

问题排查 #

• TinyMCE事件参数格式错误：TinyMCE Vue组件的change事件回调参数不是DOM事件对象，直接取$event.target.value会得到undefined，正确参数是编辑器输出的内容字符串。
• 父组件v-model绑定错误：父组件使用v-model:text，但子组件定义的是默认的modelValue属性，两者不匹配，导致绑定失效。
• 子组件内部变量未定义：子组件模板中使用的text变量未声明，无法实现预览效果。
• 冗余的事件监听：父组件同时使用v-model和@update:modelValue，属于重复逻辑，反而可能导致冲突。

修复后的代码 #

子组件（TinyMCE.vue） #

<template>
  <div>
    <p>This will be Editor JS</p>
    <div name="editor">
      <Editor
        :value="modelValue"
        @change="handleEditorChange"
        api-key="your-api-key"
        :init="{
          plugins: 'lists link image table code help wordcount'
        }"
      />
      <button @click="console.log(modelValue)">show text</button>
      <p>results</p>
      <div v-html="modelValue"></div>
    </div>
  </div>
</template>

<script setup>
import Editor from '@tinymce/tinymce-vue'
import { defineProps, defineEmits } from 'vue'

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const handleEditorChange = (content) => {
  emit('update:modelValue', content)
}
</script>

<style lang="scss" scoped></style>

父组件 #

<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]">
      <TinyMCE v-model="text"></TinyMCE>
      <div
        v-html="text"
        name="result"
        class="flex h-[300px] w-[300px] items-center justify-center border-2 border-black"
      ></div>
      <button @click="console.log(text)">See the text</button>
    </div>
  </div>
</template>

<script setup>
import TinyMCE from './TinyMCE.vue'
import { ref } from 'vue'

const text = ref('')
</script>

<style lang="scss" scoped></style>

修复说明 #

1. 修正事件回调逻辑：将TinyMCE的change事件改为直接接收编辑器内容，通过emit传递给父组件，不再错误访问$event.target.value。
2. 修正v-model绑定：父组件使用默认的v-model绑定，对应子组件的modelValue属性和update:modelValue事件，无需额外指定修饰符。
3. 移除冗余逻辑：删除父组件中多余的handleTextUpdate方法，v-model会自动更新text变量。
4. 修复子组件预览：直接使用modelValue作为预览内容，给子组件按钮添加点击事件，方便查看当前编辑器内容。

内容的提问来源于stack exchange，提问作者user22696238