<template>
<div>
<button @click="com = 'Header'">header</button>
<button @click="com = 'Footer'">footer</button>
<!-- 缓存组件 -->
<keep-alive>
<!-- 显示动态组件 -->
<component :is="com"></component>
</keep-alive>
</div>
</template>
<script>
import Header from "@/views/Header";
import Footer from "@/views/Footer";
export default {
components: {
Header,
Footer,
},
data() {
return {
com: "Header",
};
},
};
</script>
<style>
</style>
动态组件 component 缓存动态组件 keep-alive
最新推荐文章于 2023-08-10 01:51:58 发布