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

嵌套组件问题

嵌套组件遮罩层问题

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

最简单粗暴的方式就是这两个属性全都设置为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)。
相关推荐
IT_陈寒9 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用11 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥27 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端