qiankun中子系统变化透传到主系统调用主系统方法

最新推荐文章于 2024-05-17 11:22:14 发布
最新推荐文章于 2024-05-17 11:22:14 发布
阅读量421 收藏 8
点赞数 8
文章标签： 前端 vue.js qiankun
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixu_boke/article/details/134990476
版权

1、首先在主系统中qiankun启动前把变动的参数初始化

2、初始化之后就可以通过全局状态通信把参数透传为全局

3、在微应用子系统main.js的qiankun的mount中获取到全局设备参数属性并是设置为子系统全局

4、在微应用子系统中需要去调主系统方法时就在那个地方改变透传过来的参数

5、然后在主系统中就能监听到子系统中改变此属性

这是我用的方式，有什么问题或者有更好的方式大家共同交流

lixu_boke
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
wl-mfe:基于vue3 + koa2 + qiankun2的微前端后台管理系统项目实战
03-11
wl-mfe基于vue3.0-beta和qiankun2.0极速尝鲜！微前端进阶实战项目。项目地址： 微前端实战详细入门教程和解放方案请转至我另一篇文章：。项目地址： &&部署教程：最终效果项目启动npm run yinit // 使用yarn下载依赖...
vue如何搭建多页面多系统应用
10-15
通常，可以将系统划分到不同的子目录下，如`src/system/`，每个子目录代表一个系统，包含该系统的入口文件、组件、路由和模板等资源。 **Webpack配置** 为了实现上述功能，我们需要对Vue CLI生成的基础项目进行一些...
qiankun主系统、子系统传参（包括变量、方法 ）
weixin_61977924的博客
03-29 326
globalState主要用于数据共享，把方法、或者变量写进主系统的globalState里。在相应页面把要传递的方法set进去以供主系统监听使用。初始化的时候在main.ts中set一下。2.子系统使用主系统的变量。1.主系统调用子系统方法。
UmiJs - qiankun主子应用之间，数据的传递
Zong_0915的博客
07-22 2386
代码】UmiJs-qiankun主子应用之间，数据的传递。
qiankun 实现父子应用通信
最新发布
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
05-17 603
最近有一个项目在实现微服务，把几个独立的项目集成一个项目里，选择了qiankun技术栈。qinakun 官网 使用指南使用时遇到了 主应用（父），子应用之间需要传递消息。特此记录一下。
乾坤微前端框架如何主应用vue2.0，子应用vue3.0，子应用向父应用传参
qq_42573256的博客
12-24 959
第二步：子应用初始化的时候将mount函数中接到的props赋值到app，也就是vue实例上。第三步：子应用中，去调用vue实例上的parentMicro的eidtData方法即可。第一步，在主应用的props赋值microSelfData。
qiankun微应用之间、主微应用之间相互跳转方式总结与实践
热门推荐
qq_41885295的博客
07-31 1万+
qiankun 主子应用、子应用间跳转方案
关于微前端--乾坤（qiankun）如何把主应用的参数传给子应用——新增主应用在线地址
wocwin的博客
12-30 4459
【代码】关于微前端--乾坤（qiankun）如何把主应用的参数传给子应用。新增主应用在线地址
qiankun-source-code:微前端框架-qiankun源码阅读
03-23
qiankun（乾坤）源码阅读 主应用的启动start和子应用的注册registerMicroApps 首先，入口index.ts中约会和导出了启动主应用和注册子应用的方法 export { loadMicroApp, registerMicroApps, start } from './apis'; ...
qiankun-simple-main-app-web:react微前端聚合系统（qiankun.js）
05-30
主系统：React + Antd + qiankun 子系统：Vue 演示地址 系统截图 主系统设计 框架搭建 系统基础搭建 // 脚手架创建基础代码 npx create-react-app simple-main-app-web // 暴露配置(能更好的优化webpack打包) npm ...
基于vue3+koa2+qiankun2的微前端后台管理系统项目实战.zip
03-03
基于vue3+koa2+qiankun2的微前端后台管理系统项目实战.zip 主应用基座构建 主应用需要用到elementui，暂时使用vue2.0+qiankun2.0版本。vue3.0beta体验在下面【子应用构建】章节 主应用项目主要在5个文件：utils...
探讨基于@umijs/plugin-qiankun搭建的微应用的父子应用通讯方式
qq_44586361的博客
06-21 513
承接上篇文章（如何使用@umijs/plugin-qiankun搭建微前端项目）后续，下面我们探讨一下父子应用通讯的几种实现方式。
【qiankun】子应用的路由信息传给主应用，主应用使用this.$router.push跳转子应用页面
bbt953的博客
07-20 1490
子应用的路由信息传给主应用，主应用使用this.$router.push跳转子应用页面
qiankun 通用模块foundatiion 在 项目project 模块单独引用组件
qq_53439433的博客
07-10 195
最后在对应组件中调用。
qiankun搭建主应用与子应用
weixin_43845137的博客
03-23 1179
{/* 基座内容区 */})){/* 加载子应用内容区域 */}
微前端：qiankun 主应用与子应用之间的跳转
Jane's Blog
01-04 5098
qiankun主应用与子应用间的跳转
qiankun框架中基于actions机制实现主应用与子应用间的双向通信
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
04-19 1186
配置子应用的全局状态Actions，子应用中的全局状态必须要跟主应用中的全局状态变量属性名相同，比如主应用中全局状态变量为{token: “main”}，则子应用中也需要保证在setGloabalState时也需要设定相同的变量名。我们从上图可以看出，我们可以先注册 观察者 到观察者池中，然后通过修改 globalState 可以触发所有的观察者函数，从而达到组件间通信的效果。本示例介绍的是子应用中通过路由守卫，把当前的路由面包屑名称传到主应用中，主应用展示面包屑功能。这里也可以监听主应用的参数。
微前端：qiankun的五种通信方式
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
12-03 1万+
微前端 qiankun 竟然有 5 种应用间通信方式
qiankun主应用动态调用子应用方法
05-18
在qiankun中，主应用可以通过 `loadMicroApp` 方法动态加载子应用，并且可以通过 `start` 方法启动子应用实例。一旦启动了子应用实例，主应用就可以通过 `getMicroApp` 方法获取子应用实例，然后调用子应用中暴露的方法。 以下是一个简单的示例代码，演示了如何在主应用中调用已启动的子应用中的方法： ```javascript // 在主应用中动态加载子应用 const microApp = loadMicroApp({ name: 'child-app', entry: '//localhost:8080', container: '#child-app-container', }); // 启动子应用实例 microApp.start(); // 获取子应用实例 const childApp = getMicroApp('child-app'); // 调用子应用中暴露的方法 childApp.instance.someMethod(); ``` 需要注意的是，子应用中需要将需要暴露给主应用调用的方法通过 `setGlobalState` 方法进行全局状态管理，以便主应用可以通过 `getGlobalState` 方法获取到这些方法。同时，在子应用中也可以通过 `onGlobalStateChange` 方法监听主应用的状态变化。具体实现可以参考 qiankun 官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值