<!-- MainPage.vue -->
|
<template>
|
<view>
|
<button @click="openSubPage('SubPage')">打开子页面1</button>
|
<button @click="openSubPage('SubPage2')">打开子页面2</button>
|
<view v-if="showSubPage">
|
<component :is="currentComponent" v-bind="componentProps"></component>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import SubPage from './SubPage.vue';
|
import SubPage2 from './SubPage2.vue';
|
|
export default {
|
data() {
|
return {
|
showSubPage: false,
|
currentComponent: null,
|
componentProps: {}
|
};
|
},
|
methods: {
|
openSubPage(page) {
|
if (page === 'SubPage') {
|
this.currentComponent = SubPage;
|
this.componentProps = { param1: '值1', param2: '值2' };
|
} else if (page === 'SubPage2') {
|
this.currentComponent = SubPage2;
|
this.componentProps = { paramA: '值A', paramB: '值B' };
|
}
|
this.showSubPage = true;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
/* 添加一些样式 */
|
</style>
|
