quill在子组件或者在弹窗中不渲染遇到 Error: Invalid Quill container 错误

错误通常是因为 Quill 初始化时未能正确找到或绑定到有效的 DOM 容器。

关键是判断DOM是否挂载完毕  nextTick(); // 确保子组件已挂载

我最开始是父组件给子组件传值然后进行v-show\v-if进行条件渲染，这种方法都不可行，代码如下：

父组件：

<template>
    <div>
    <button @click="openn ">点击打开</button>
<fuwen  :show="open"/>
    </div>
</template>

<script setup>
import { ref, } from "vue" 
import fuwen from '@/components/fuwen.vue'
const open = ref(false)
const openn = async() => {
  open.value = true

}
</script>

子组件：

<script setup>
import { onMounted, ref,defineProps ,nextTick} from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.snow.css'; // 引入 Quill 的样式
import { addMessage } from "@/api/index";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const show = props.show;
// 引用编辑器容器
const quillEditor = ref(null);
let quillInstance = null;

onMounted(async() => {
  // 初始化 Quill 编辑器
 
  if (show) {
    await nextTick(); // 确保子组件已挂载
    console.log('子组件已挂载');
      // 创建 Quill 实例并将其挂载到 DOM 元素上
  quillInstance = new Quill(quillEditor.value,{
    debug: 'info',
    modules: {
      toolbar: [
        [{ header: ['1', '2', '3', false] }],
        ['bold', 'italic', 'underline', 'link'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['clean'],
        ['table'], // 增加表格格式
        ['image', 'code-block']
      ]
    },
    placeholder: '请输入内容...',
    theme: 'snow',
  } );

  // 确保 Quill 实例成功创建后再调用 setContents
  quillInstance.setContents([{"insert":"符文好贵好热啊\n搜ID防护佛水电费\n"}]);
  }

});

// 保存内容的函数
const saveContent = async() => {
  // 获取 HTML 内容
  const htmlContent = quillInstance.root.innerHTML;
  console.log('HTML 内容: ', htmlContent);

  // 获取 Delta 格式内容
  const deltaContent = quillInstance.getContents();
  console.log('Delta 内容: ', JSON.stringify(deltaContent));
  let data={
    title:"quill测试",
    content:JSON.stringify(deltaContent)
  }

  const res=await addMessage(data);
  console.log("res",res);
};

</script>

<template>
  <div v-if="show">
      <div id="quill-editor" ref="quillEditor"></div>
    <button @click="saveContent">保存内容</button>
  </div>
  
  
   
  </el-dialog>

  
</template>

<style scoped>
#quill-editor {
  height: 300px;
}
</style>

情况一：只需在父组件进行v-if\v-show条件渲染（此种情况只是父子组件）

<fuwen v-if="open"/>//子组件

情况二：子组件使用了<el-dialog>对话框组件就还会出现那个问题

解决

使用nextTick(); // 确保子组件已挂载

子组件：

<script setup>
import { onMounted, ref,defineProps ,nextTick} from 'vue';
import Quill from 'quill';
import 'quill/dist/quill.snow.css'; // 引入 Quill 的样式
import { addMessage } from "@/api/index";
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const show = props.show;
// 引用编辑器容器
const quillEditor = ref(null);
let quillInstance = null;

onMounted(async() => {
  // 初始化 Quill 编辑器
 
  if (show) {
    await nextTick(); // 确保子组件已挂载
    console.log('子组件已挂载');
      // 创建 Quill 实例并将其挂载到 DOM 元素上
  quillInstance = new Quill(quillEditor.value,{
    debug: 'info',
    modules: {
      toolbar: [
        [{ header: ['1', '2', '3', false] }],
        ['bold', 'italic', 'underline', 'link'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        ['clean'],
        ['table'], // 增加表格格式
        ['image', 'code-block']
      ]
    },
    placeholder: '请输入内容...',
    theme: 'snow',
  } );

  // 确保 Quill 实例成功创建后再调用 setContents
  quillInstance.setContents([{"insert":"符文好贵好热啊\n搜ID防护佛水电费\n"}]);
  }

});

// 保存内容的函数
const saveContent = async() => {
  // 获取 HTML 内容
  const htmlContent = quillInstance.root.innerHTML;
  console.log('HTML 内容: ', htmlContent);

  // 获取 Delta 格式内容
  const deltaContent = quillInstance.getContents();
  console.log('Delta 内容: ', JSON.stringify(deltaContent));
  let data={
    title:"quill测试",
    content:JSON.stringify(deltaContent)
  }

  const res=await addMessage(data);
  console.log("res",res);
};
const dialogVisible = ref(true);
</script>

<template>
   <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
      <div id="quill-editor" ref="quillEditor"></div>
    <button @click="saveContent">保存内容</button>
  
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

  
</template>

<style scoped>
#quill-editor {
  height: 300px;
}
</style>

父组件：

<template>
    <div>
    <button @click="openn ">点击打开</button>
<fuwen v-if="open" :show="open"/>
    </div>
</template>

<script setup>
import { ref, } from "vue" 
import fuwen from '@/components/fuwen.vue'
const open = ref(false)
const openn = async() => {
  open.value = true

}
</script>

总结：出现此问题就用nextTick()函数