fix(vue): add unmount hook to unmount application & add appProps prov…

…ide props to sub-application
umijs · Dec 20, 2023 · 573e604 · 573e604
1 parent b7ec9e7
commit 573e604
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 19 deletions.
diff --git a/packages/ui-bindings/vue/README.md b/packages/ui-bindings/vue/README.md
@@ -105,6 +105,7 @@ import { MicroApp } from '@qiankunjs/vue';
 | `autoCaptureError` | No | Automatically set error capturing for the micro-application | `boolean` | `false` |
 | `className` | No | The style class for the micro-application | `string` | `undefined` |
 | `wrapperClassName` | No | The style class wrapping the micro-application's loading and error components | `string` | `undefined` |
+| `appProps` | No | Properties passed to the sub-application | `Record<string, any>` | `undefined` |
 
 ### Component Slots
 

diff --git a/packages/ui-bindings/vue/README.zh-CN.md b/packages/ui-bindings/vue/README.zh-CN.md
@@ -107,6 +107,7 @@ import { MicroApp } from '@qiankunjs/vue';
 | `autoCaptureError` | 否 | 自动设置微应用的错误捕获 | `boolean` | `false` |
 | `className` | 否 | 微应用的样式类 | `string` | `undefined` |
 | `wrapperClassName` | 否 | 包裹微应用加载组件、错误捕获组件和微应用的样式类，仅在启用加载组件或错误捕获组件时有效 | `string` | `undefined` |
+| `appProps` | 否 | 传递给子应用的属性 | `Record<string, any>` | `undefined` |
 
 ### 组件插槽
 

diff --git a/packages/ui-bindings/vue/src/MicroApp.ts b/packages/ui-bindings/vue/src/MicroApp.ts
@@ -1,5 +1,5 @@
 import type { PropType } from 'vue-demi';
-import { computed, defineComponent, h, onMounted, reactive, ref, toRefs, watch, isVue2 } from 'vue-demi';
+import { computed, defineComponent, h, onMounted, reactive, ref, toRefs, watch, isVue2, onUnmounted } from 'vue-demi';
 import type { AppConfiguration, LifeCycles } from 'qiankun';
 import type { MicroAppType } from '@qiankunjs/ui-shared';
 import { mountMicroApp, omitSharedProps, unmountMicroApp, updateMicroApp } from '@qiankunjs/ui-shared';
@@ -43,10 +43,14 @@ export const MicroApp = defineComponent({
       type: String,
       default: undefined,
     },
+    appProps: {
+      type: Object,
+      default: undefined,
+    },
   },
   setup(props, { slots }) {
     const originProps = props;
-    const { name, wrapperClassName, className, ...propsFromParams } = toRefs(originProps);
+    const { name, wrapperClassName, className, appProps, ...propsFromParams } = toRefs(originProps);
 
     const loading = ref(false);
     const error = ref<Error>();
@@ -77,29 +81,36 @@ export const MicroApp = defineComponent({
 
     const rootRef = ref<HTMLDivElement | null>(null);
 
-    onMounted(() => {
-      console.log(rootRef.value);
+    const unmount = () => {
+      const microApp = microAppRef.value;
 
-      console.log(containerRef.value);
+      if (microApp) {
+        microApp._unmounting = true;
+
+        unmountMicroApp(microApp).catch((err: Error) => {
+          setComponentError(err);
+          loading.value = false;
+        });
 
+        microAppRef.value = undefined;
+      }
+    };
+
+    onMounted(() => {
       watch(
         name,
         () => {
-          const microApp = microAppRef.value;
-
-          if (microApp) {
-            microApp._unmounting = true;
-
-            unmountMicroApp(microApp).catch((err: Error) => {
-              setComponentError(err);
-              loading.value = false;
-            });
-
-            microAppRef.value = undefined;
-          }
+          unmount();
 
           mountMicroApp({
-            props: originProps,
+            props: {
+              name: name.value,
+              entry: originProps.entry,
+              settings: originProps.settings,
+              lifeCycles: originProps.lifeCycles,
+              ...reactivePropsFromParams.value,
+              ...appProps.value,
+            },
             container: containerRef.value!,
             setMicroApp: (app?: MicroAppType) => {
               microAppRef.value = app;
@@ -118,14 +129,18 @@ export const MicroApp = defineComponent({
       );
 
       watch(
-        reactivePropsFromParams,
+        [reactivePropsFromParams, appProps],
         () => {
           updateMicroApp({
             getMicroApp: () => microAppRef.value,
             setLoading: (l) => {
               loading.value = l;
             },
             key: 'vue',
+            propsFromParams: {
+              ...reactivePropsFromParams.value,
+              ...appProps.value,
+            },
           });
         },
         {
@@ -134,6 +149,10 @@ export const MicroApp = defineComponent({
       );
     });
 
+    onUnmounted(() => {
+      unmount();
+    });
+
     const microAppWrapperClassName = computed(() =>
       wrapperClassName.value ? `${wrapperClassName.value} qiankun-micro-app-wrapper` : 'qiankun-micro-app-wrapper',
     );