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

嵌套组件问题

嵌套组件遮罩层问题

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

最简单粗暴的方式就是这两个属性全都设置为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)。
相关推荐
小桥风满袖1 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang1 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793081 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
前端人类学1 小时前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
李重楼1 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu1 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin1 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
CryptoRzz1 小时前
印度尼西亚股票数据API对接实现
javascript·后端
brzhang1 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构