-
description
The plug-in library is mainly used to solve the communication mode of nested iframe, and realize the functions of callback and automatic association, management and so on
插件库主要用来解决嵌套 iframe 的通信方式，实现回调与自动关联，管理等功能
在入口文件或者项目启动初期，或者 window.onload 等类似生命周期中
| 属性 | type | 描述 | 默认值 |
|---|---|---|---|
| resposeKey | string | <必填>响应前缀标识 | respose: |
| connection | string | <必填>关联子容器标识，必须与子容器一致 | connection |
| children | Array[{}] | <必填>子容器列队 | [] |
| storeKey | random(string) | 可选 | - |
| 属性 | type | 描述 | 默认值 |
|---|---|---|---|
| dispatch | Function(data,to,callback)?.then() | data 格式为{action:'事件名称',payload:{any}} microApp.dispatch({action:'init',payload:{data:'项目初始化'}}) | respose: |
| watch | Function | microApp.watch('eventName',Function(payload)) | 监听子容器的事件 |
| close | Function | microApp.close() 关闭 poseMessage 事件 |
- 父容器中挂载子容器
<template>
<div>
<iframe id="child-1" src="http://localhost:9527/" />
</div>
</template>
<script setup>
import {microApp} from 'iframe-connector'
import {onmounted} from 'vue'
onMounted(() => {
microApp.start({
resposeKey:'respose:' // 关联key,必须设置，默认为 response:连接子容器回调关联标识符号
connection:'connection'// 衔接子容器的关联
children:[
{
name:'child-1',// 子容器别名
id:'child-1' // 如 <iframe id="child-1">
// host:'http://www.chpil.com:8080' // 强制关联子容器[不填写则不强制关联IP http://www.chpil.com:8080]
}
],
// 初始化共享数据
store:{}
})
})
</script>import { microApp } from 'iframe-connector';
// any component 向容器发送
microApp.dispatch(
{
action: 'anyParentAction',
payload: {
message: '父发送的信息',
},
},
'child-1', // 子容器的名称 -> children中的某一个容器的name, 自动触发对应的host并发送数据
() => {
console.log('子容器接受到信息回调');
}
);
// 或者使用promise，但是这个写法只能写在【触发】函数上 比如不能写在生命周期中
microApp
.dispatch(
{
action: 'anyParentAction',
payload: {
message: '父发送的信息',
},
},
'child-1' // 子容器的名称 -> children中的某一个容器的name, 自动触发对应的host并发送数据
)
.then(() => {
console.log('子容器接受到信息回调');
});// entry入口文件中
import { microSubApp } from 'iframe-connector';
// 挂载子容器，查找父容器的存在点
microSubApp({ name: 'child-1' });
// 监听父容器向子容器发送信息
microSubApp.watch('anyParentAction', (payload) => {
// payload
console.log('any to do');
});
/**
* microSubApp.dispatch(data, toHost, callbackFunc = (store))
*/
microSubApp.dispatch(
{
action: 'anyChildAction',
payload: {
message: '子发送的信息',
},
},
'child-1', // 子容器的名称 -> children中的某一个容器的name, 自动触发对应的host并发送数据
() => {
console.log('子容器接受到信息回调');
}
);// 父亲容器
import { microApp } from 'iframe-connector';
// 初始化共享数据
microApp.start({
store: {
num: 100,
},
});
// 修改数据中心
microApp.setStore((store) => {
store.num = 200;
});
// 子容器中 修改数据
import { microSubApp } from 'iframe-connector';
microSubApp();
// 子容器修改数据中心
microSubApp.setStore((store) => {
store.num = 200;
});// any component
import { microApp } from 'iframe-connector';
import { microSubApp } from 'iframe-connector';
const customData = microApp.getStore() || microSubApp.getStore();- 可以自定义 hooks 函数绑定到 data 或者 ref(Composition API) 上 无非就是添加了 observe 观察器
- 如论是 VUE3 还是 vue2、composition-api 或 options-api 在 tempalte 上都转义执行隐式原型链方法, 。
- 同 vue2 一样可以自定义 hooks 函数，绑定到 state 上或者 hooks useState 利用闭包