前言
目前公司有个业务需求，想让我们把一个系统嵌入到另一个项目中。经过讨论，决定使用无界嵌入。因为之前没有使用过无界这个技术栈，所以在此记录一下使用过程与遇到的坑。
主系统中使用
我们主应用用到的是vue3，所以安装了wujie-vue3
下面是wujie属性的解释
- name属性：是唯一id，如果主项目中多处用到wujie，name不能用一样的
- url属性：对应子项目的链接
- props属性：对象，传给子应用的值（里面传什么字段之类的可以自定义）
- plugins属性: 用于扩展其功能，通过插件可以实现更多的定制化需求，这个属性非常重要，可以这个属性中加入wujie-polyfill库中的插件，例如
const plugins = [EventTargetPlugin()];在使用子应用的时候会发现事件回调函数的e.target指向发生了变化，导致你原先的从e.target.value取值的方式无法读取到表单的值，或者setTimeout的回调函数执行会出现一些诡异的现象。而EventTargetPlugin是为了解决这个问题引入的插件，第一次用wujie在这里踩了很大的坑，改了很久的bug才发现这个插件。
bus 的的使用
这里只介绍我在项目中常用的方法
- $on 监听子应用事件的回调
-
类型：
(event: string, fn: callback) => EventBus -
参数：
{string} event事件名{callback} fn回调参数
-
详情： 监听事件并提供回调
- $emit 在主应用中触发事件
-
类型：
(event: string, ...args: Array<any>) => EventBus -
参数：
{string} event事件名{Array<any>} args其他回调参数
-
详情： 触发事件
<template>
<div v-if="url" class="wh-full">
<WujieVue
name="wujie1"
:url="url"
:props="wujieProps"
:plugins="plugins"
alive
width="100%"
height="100%"
></WujieVue>
</div>
</template>
<script setup>
import WujieVue from 'wujie-vue3';
import { EventTargetPlugin } from 'wujie-polyfill';
const { bus, destroyApp } = WujieVue;
const url = ''
const wujieProps = {}
const plugins = [EventTargetPlugin()];
onMounted(() => {
bus.$on('close', () => {
destroyApp('scada');
});
watchEffect(() => {
bus.$emit('message', {});
});
});
</script>
结语
后面再写一下在子应用中的使用...
