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

嵌套组件问题

嵌套组件遮罩层问题

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

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

css 复制代码
    :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.

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

解决办法是只有全局注册

js 复制代码
// 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

js 复制代码
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)。
相关推荐
张晓~183399481211 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑1 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue772 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃2 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人2 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架