quillEditor vue3 数据双向绑定

quillEditor的Vue3版本实现数据双向绑定的方法如下所示:

在父组件中，使用v-model指令将变量与子组件的数据进行双向绑定。在子组件中，使用v-model指令绑定input的值，并在input的change事件中使用$emit方法触发update事件，将input的值传递给父组件。

具体代码如下:

// 父组件
<template>
  <quill-editor v-model="content"></quill-editor>
</template>

<script>
import QuillEditor from './QuillEditor.vue';

export default {
  data() {
    return {
      content: '',
    };
  },
  components: {
    QuillEditor,
  },
};
</script>

// 子组件 QuillEditor.vue
<template>
  <div>
    <input v-model="text" @change="handleChange" />
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      text: this.value,
    };
  },
  methods: {
    handleChange() {
      this.$emit('update:value', this.text);
    },
  },
};
</script>