当在Vue中使用乾坤微前端框架时,需要进行主应用和子应用的配置和传参。下面是一个完整的示例:
1. 主应用配置:
在主应用的入口文件(如main.js)中,需要进行乾坤的初始化和配置。
import { createApp } from 'vue';
import { registerMicroApps, start } from 'qiankun';
import App from './App.vue';
// 创建主应用实例
const app = createApp(App);
// 注册子应用
registerMicroApps([
{
name: 'sub-app-1',
entry: '//localhost:8081', // 子应用1的入口地址
container: '#sub-app-container', // 子应用1的容器
activeRule: '/sub-app-1', // 子应用1的激活规则
props: {
// 可以在这里定义需要传递的参数
message: 'Hello from main app!',
},
},
]);
// 启动乾坤
start();
// 挂载主应用
app.mount('#app');
2. 子应用配置:
在子应用的入口文件中,需要进行乾坤的初始化和配置,并可以接收主应用传递的参数。
import { createApp } from 'vue';
import App from './App.vue';
// 创建子应用实例
const app = createApp(App);
// 接收主应用传递的参数
app.config.globalProperties.$props = __POWERED_BY_QIANKUN__ ? window.__POWERED_BY_QIANKUN__.props : {};
// 挂载子应用
app.mount('#app');
3. 子应用组件中使用传递的参数:
在子应用的组件中,可以通过this.$props
访问主应用传递的参数。
<template>
<div>
<h1>Sub App</h1>
<p>{{ $props.message }}</p>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$props);
},
};
</script>
这样,主应用就可以将参数传递给子应用,并在子应用中使用。同时,乾坤会根据激活规则自动加载和卸载子应用,实现微前端的效果。