微前端qiankun进阶使用：应用间通信

master主应用相干目次

1. ├── src
2. │ ├── micro                        # 存放微前端所需文件
3. │   │── actions.js              # 官方通信方案：全局状态数据
4. │   │── app.js                  # 子应用配置
5. │   │── childEmit.js            # 子应用触发主应用的函数
6. │   │── index.js                # 启动文件
7. │   │── jsLibrary.js            # 公共方法库,用于下发子应用
8. │   └── uiLibrary.js            # 公共组件库,用于下发子应用
9. │ ├── store                        
10. │   │── modules            
11. │       │── pagers.js            # 应用间通信的数据仓库
12. │   │── getters.js            
13. │   │── index.js                # store主文件

复制代码

store中用pagers.js 文件里存放应用间通信的数据堆栈
主应用->子应用通信：通过props参数传递

• 主应用通过props参数下发数据
  
• 子应用在bootstrap和mount生命周期中接收数据
  

主应用下发数据

micro/app.js中

1. /**
2. * auth：pantt
3. * time：2022.06.15
4. * des：配置需要下发的子应用及其相关信息
5. */
6. import store from '@/store'
8. const arr = window.origin.split(':')
9. const origin = arr[0] + ':' + arr[1]
11. const ENV = process.env.NODE_ENV
12. /**
13. * 主应用公共资源下发子应用
14. */
15. // 导入主应用ui库
16. import LibraryUi from './uiLibrary'
17. // 导入主应用工具类库
18. import LibraryJs from './jsLibrary'
19. // 导入主应用需要下发的emit函数
20. import * as childEmit from './childEmit'
22. // 注意：必须用方法获取，直接取store为undefined
23. export function getApps() {
24.    
25.   // 配置要下发的数据
26.   const msg = {
27.    
28.     data: store.getters, // 从主应用仓库读出的数据
29.     components: LibraryUi, // 从主应用读出的组件库
30.     utils: LibraryJs, // 从主应用读出的工具类库
31.     emitFnc: childEmit // 从主应用下发emit函数来收集子应用反馈
32.     // pager, // 从主应用下发应用间通信呼机
33.   }
34.   return [
35.     /**
36.      * name: 微应用名称 - 具有唯一性
37.      * entry: 微应用入口 - 通过该地址加载微应用,本地与服服务器配置有区别
38.      * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
39.      * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
40.      * props: 主应用下发给子应用传递数据
41.      */
42.     {
43.    
44.       name: 'netmoni_child1',
45.       entry:
46.         origin + (ENV === 'development' ? ':31325' : '/child/netmoni_child1/'),
47.       container: '#child1_frame',
48.       activeRule: '/sub/child1',
49.       props: {
50.     ...msg } // 下发子应用的信息
51.     },
52.   ]
53. }

复制代码

store/getters.js

1. const getters = {
2.    
3.   device: state => state.app.device,
4.   token: state => state.user.token,
5.   name: state => state.user.name,
6.   childData: state => state.pagers.childData,
7.   initialState: state => state.pagers.initialState // qiankun官方通信actions数据
8. }
9. export default getters

复制代码

micro/jsLibrary.js中

1. /**
2. * auth：pantt
3. * time：2022.06.15
4. * des：公共方法库,用于下发子应用
5. */
7. import request from '@/utils/request'// 统一下发公共的axios封装请求
8. import * as validate from '@/utils/validate'
10. const _exports = {
11.     request, ...validate }
13. export default _exports

复制代码

micro/uiLibrary.js中

1. /**
2. * auth：pantt
3. * time：2022.06.15
4. * des：公共组件库,用于下发子应用
5. */
7. import ZdEmpty from '@/components/Empty/index.vue'
9. ZdEmpty.install = function (Vue) {
10.   Vue.component('ZdEmpty', ZdEmpty)
11. }
12. const install = function (Vue) {
13.   Vue.component('ZdEmpty', ZdEmpty)
14. }
16. if (typeof window !== 'undefined' && window.Vue) {
17.   install(window.Vue)
18. }
20. export default {
21.   install,
22.   ZdEmpty
23. }

复制代码

子应用接收数据

main.js中

1. /**
2. * bootstrap 只会在微

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。