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

嵌套组件问题

嵌套组件遮罩层问题

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

最简单粗暴的方式就是这两个属性全都设置为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)。
相关推荐
长空任鸟飞_阿康3 分钟前
在 Vue 3.5 中优雅地集成 wangEditor,并定制“AI 工具”下拉菜单(总结/润色/翻译)
前端·vue.js·人工智能
lapiii3587 分钟前
快速学完React计划(第一天)
前端·react.js·前端框架
苏打水com9 分钟前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
一枚前端小能手18 分钟前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript
小潘同学21 分钟前
Vue3中响应式数据深度拷贝 Avoid app logic that relies on,,,,,,,,
前端
六六Leon24 分钟前
Kuikly跨端模式接入资源管理
前端
tianchang27 分钟前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
旺仔牛仔QQ糖28 分钟前
Vue3.0 Hook 使用好用多多
前端
~无忧花开~1 小时前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体