弹窗组件嵌套弹窗组件问题

嵌套组件问题

• 嵌套组件遮罩层问题
• • 嵌套的是同一个组件
• 总结

嵌套组件遮罩层问题

嵌套组件遮罩层问题，即父弹窗组件打开子弹窗组件时，子组件被遮盖

最简单粗暴的方式就是这两个属性全都设置为true

    :append-to-body="appendToBody"
    :modal-append-to-body="modalAppendToBody"

嵌套的是同一个组件

当弹窗组件嵌套的组件是同一个弹窗组件时，会报错Unknown custom element: <DialogContent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

通过多次实践，直接在局部注册该组件时就是会报这个错

解决办法是只有全局注册

// main.js
   import Vue from 'vue';
   import MyComponent from './components/MyComponent.vue';

   Vue.component('MyComponent', MyComponent);

   new Vue({
     render: h => h(App),
   }).$mount('#app');
   

or

import { createApp } from 'vue';
import App from './App.vue';
import MyComponentfrom './components/MyComponent.vue';

const app = createApp(App);
app.component('MyComponent', MyComponent);  // 全局注册
app.mount('#app');

总结

• 确保路径和导入正确。
• 确保组件注册没有问题，并且 Vue 可以正确识别它。
• 确保递归组件使用 name 属性，并且在模板中正确使用它。
• 清理缓存并重新编译，排除构建缓存问题。
• 使用条件渲染来控制嵌套组件的显示（如 v-if）。