微前端ice-stark主应用与子应用间的通信

微前端中都需要哪些通信

主应用与子应用通信
子应用之间的通信

主应用与子应用通信

安装store

使用 @ice/stark-data 包，需要单独安装

pnpm install @ice/stark-data --save

使用store

主应用页面引入后进行传值

import { store } from '@ice/stark-data'
console.log(store)
const userInfo = { name: 'Sabo', age: 29 }
store.set('user', userInfo)

同理，子应用中获取user，监听主应用数据变化

import { store } from '@ice/stark-data'
const userInfo = store.get('user')
console.log('userInfo: ', userInfo)

子应用传值给父应用

子应用触发事件

<template><div><h1 @click="initHandler">home</h1></div>
</template><script lang="ts" setup>
import { ref } from "vue";
import { event } from "@ice/stark-data";const initHandler = async () => {event.emit("freshMessage", "vue lllllmessage");
};
</script><style scoped lang="less"></style>

父应用接收数据

import { event } from '@ice/stark-data'
event.on('freshMessage', (res: string) => {console.log('App ', res)
})

props传值

在icestark2.0更新版本中，icestark 还支持通过 props 将主应用数据传递给微应用。

在主应用中通过 props 配置用户信息。

// src/App.jsx
import { AppRouter, AppRoute } from '@ice/stark';const App = () => {return (<AppRouter><AppRoutename="waiter"activePath="/waiter"title="商家平台",props={{userId: 'xxxxx'}}url={['https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-waiter-vue/dist/js/app.js','https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-waiter-vue/dist/css/app.css',]}/>...</AppRouter>);
}

微应用可以通过生命周期函数获取到该数据：

export function mount({ container, customProps }) {ReactDOM.render(<App { ...customProps } />, props.container);
}

微前端ice-stark主应用与子应用间的通信相关推荐

mfc获取子窗口句柄_前端设计-JavaScript中父窗口与子窗口间的通信
父窗体与子窗体之间的通信在之前文章讲解windows程序设计过程中,我们曾描述了windows程序窗口之间通信与控制实现方法与过程,如窗体之间参数传递等.本文主要从Web程序开发前端JavaScri ...
关于主窗体与子窗体之间的通信以及面向对象思想的一些应用
该写几篇文章啦~ 最近在搞winForm,开始的时候遇到点问题.其实也不算什么大问题,归结起来还是主窗体与子窗体之间传值.通信的问题: 这个问题在网上的解决方案有很多,一搜一大堆,比如将主窗体自身作为 ...
vue---父子组件间的通信
一.父子组件通信父---子:props 子传父:自定义组件emit (1)父组件向子组件传值 props只能是父组件向子组件进行传值,可以显示定义一个或一个以上的数据,可以接收各种数据类型,也可以传 ...
关于微前端，你想知道的都在这!
更多请关注微前端专题 https://codeteenager.github.io/Micro-Frontends/ 介绍微前端官网:https://micro-frontends.org/ 问题: ...
三、如何手动实现一个微前端框架雏形
如何手动实现一个微前端框架雏形一.了解微前端 1. 什么是微前端为了解决一整块儿庞大的前端服务所带来的变更和拓展方面的限制,将整体前端服务拆分成一些更小.更简单的,能够独立开发.测试部署的小块儿. ...
微前端是什么、价值、不足、典型模式
微前端技术调研微前端(Micro-Frontends)是什么为了解决庞大的后端服务带来的变更与扩展方面的限制,出现了微服务架构(Microservices),越来越重的前端工程也面临同样的问题,自 ...
基于乾坤的微前端+SpringBoot2.7整套解决方案的基础通用平台及组件
所有源码均已上传github,欢迎各位star哈介绍包含前后端整套解决方案的企业级基础通用平台及组件前端基于 qiankun 实现的微前端基础方案主应用(main-project)基于Vue ...
【微前端】591- 微前端在小米 CRM 系统的实践
前言微前端跟Serverless,当前前端热门话题. @木子朗,小米前端工程师,目前专注于前端架构.前端工程化,热衷于打造高质量.高性能.用户体验一流的产品.个人网站:https://www.li ...
微前端在小米 CRM 系统的实践
作者 | 木子朗 https://www.lishuaishuai.com/architecture/1344.html 大型组织的组织结构.软件架构在不断地发生变化.移动优先(Mobile Firs ...

微前端ice-stark主应用与子应用间的通信

微前端中都需要哪些通信

主应用与子应用通信

安装store

使用store

子应用传值给父应用

子应用触发事件

父应用接收数据

props传值

微前端ice-stark主应用与子应用间的通信相关推荐

最新文章

热门文章