当前位置: 首页 > news >正文

qiankun隔离机制

  1. css样式隔离
    在qiankun微前端项目中,css样式隔离主要有2种方案
    在这里插入图片描述
    第一种是主要是使用选择器进行样式隔离,效果如下
    在这里插入图片描述
    主要是选择器上添加上了每个自应用的标识。

第二种的话是shadow dom的方式,该方式会使整个子应用在shadow dom下渲染。类似于iframe的那种效果
在这里插入图片描述
可以看到子应用在shadow下渲染,全局样式也影响不到子应用了。

2.js隔离
在这里插入图片描述
于是在子应用中访问window时会优先访问该应用上的代理window,没有的话会访问主应用上的winow,子应用间设置window上的值不会反应到主应用上,各子应用互不影响

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

比如在主应用上设置window.test= ‘mian-vue’, vue2项目子应用改变window.test。 在vue2子应用中window.test为home-page,而在vue3项目子应用中访问window.test时是main-vue

在这里插入图片描述

http://www.dtcms.com/a/268587.html

相关文章:

  • [附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+jsp实现的高校实验室资源综合管理系统,推荐!
  • 按键开关:新型防水按键开关的特点!
  • 音频流媒体技术选型指南:从PCM到Opus的实战经验
  • 【Java面试】Https和Http的区别?以及分别的原理是什么?
  • 02 除了前面常见图表,还有许多更细分或专业的可视化类型,尤其是在特定领域(如金融、工程、生物信息等)。
  • GaussDB应用场景全景解析:从金融核心到物联网的分布式数据库实践
  • OpenCV 人脸分析----人脸识别的一个经典类cv::face::EigenFaceRecognizer
  • Oracle PL/SQL 编程基础详解(从块结构到游标操作)
  • idea 使用vscode 快捷键
  • UE 材质 变体 概念
  • ClickHouse 入门详解:它到底是什么、优缺点、和主流数据库对比、适合哪些场景?
  • 1.1_5_2 计算机网络的性能指标(下)
  • 【Vben3全解】【组件库开发】解决组件库开发中css的命名难题,保证代码质量,构建useNamespace函数
  • docker所占硬盘内存指令
  • 强化学习:Distributed PPO (DPPO) 学习笔记
  • Day08-Flask 或 Django 简介:构建 Web 应用程序
  • C++高频知识点(三)
  • 基于STM32设计的心率脉搏测量仪(项目资料)(ID:9)
  • 【Linux | 网络】网络编程套接字
  • Baklib作为赞助商参加RubyConf China 2025 技术大会
  • Java基础:随机数生成、循环结构与方法封装详解
  • 国产MCU学习Day10——CW32F030C8T6模拟电压比较器全解析
  • 【EGSR2025】材质+扩散模型+神经网络相关论文整理随笔
  • springsecurity03--异常拦截处理(认证异常、权限异常)
  • 【机器学习深度学习】多分类评估策略:混淆矩阵计算场景模拟示例
  • Rust 注释
  • OpenAI要开发能聊天的AI版Office挑战微软?
  • 【Spring】Spring Boot + OAuth2 + JWT + Gateway的完整落地方案,包含认证流程设计
  • window 服务器上部署前端静态资源以及nginx 配置
  • 揭秘图像LLM:从像素到语言的智能转换