vue3 自定义组件双向绑定（modelValue）

参考链接：https://huaweicloud.csdn.net/638edf68dacf622b8df8d152.html

父组件：

<Customabc

ref="editor" v-model="data.introduction" :min-height="400" name="职能" placeholder="请编辑" />

子组件

<div class="tinymce-container">
    <editor
      v-model="tinymceData"
      :api-key="key"
      :init="tinymceOptions"
      :name="name"
      :readonly="tinymceReadOnly"
    />
</div>
<script>
  import { ref, watch, watchEffect } from 'vue'
  import Editor from '@tinymce/tinymce-vue'
  import { key, plugins, toolbar, setting } from './config'
  export default {
    name: 'Customabc',
    components: { Editor },
    props: {
      modelValue: {
        type: String,
        default: '',
      },
      readOnly: {
        type: Boolean,
        default: false,
      },
      options: {
        type: Object,
        default() {
          return { plugins, toolbar }
        },
      },
      name: {
        type: String,
        default: '',
      },
    },
    emits: ['update:modelValue'],
    setup(props, { emit }) {
      const tinymceData = ref(props.modelValue) // 编辑器数据
      watch(
        () => tinymceData.value,
        (data) => emit('update:modelValue', data)
      ) // 监听富文本输入值变动
      return {
        tinymceData,
      }
    },
  }
</script>