Vue3中使用VueQuill渲染HTML字符串时出现emit未定义错误

问题根源 #

你遇到的错误是因为绑定的data不是响应式变量，VueQuill在contentType="html"模式下，内部依赖响应式数据的变更来触发emit逻辑。非响应式变量会导致组件初始化时无法正确获取到emit的上下文，而contentType="text"模式的内部处理逻辑不依赖这个环节，所以没有报错。

解决方案 #

1. 将数据改为响应式变量

使用Vue3的ref将data声明为响应式变量，这是最直接的修复方式：

<template>
  <div class="">
      <QuillEditor v-model:content="data" contentType="html" />
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref } from 'vue'

export default {
  name: 'HomeView',
  components: {
    QuillEditor
  },
  setup(){
    // 用ref包裹HTML字符串，转为响应式数据
    const data = ref("<div><p>test test test</p></div>")

    return {
      data
    }
  }
}
</script>

2. 延迟初始化HTML内容（可选）

如果上述方法仍有问题，可以尝试在组件挂载后再赋值HTML内容，确保组件内部实例已完全创建：

<template>
  <div class="">
      <QuillEditor v-model:content="data" contentType="html" />
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref, onMounted } from 'vue'

export default {
  name: 'HomeView',
  components: {
    QuillEditor
  },
  setup(){
    const data = ref("")

    onMounted(() => {
      // 组件挂载后再赋值HTML
      data.value = "<div><p>test test test</p></div>"
    })

    return {
      data
    }
  }
}
</script>

验证 #

修改后重新运行项目，contentType="html"模式下的渲染应该正常，控制台不会再出现emit相关的错误。

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