<component :is=“动态组件“></component>
动态组件我们一般会创建几个自己要用的组件,便于来回的切换页面,并且不影响其他页面
<template>
<div id="app">
<a @click="current = 'L'">
<button> 列表 </button>
</a>
=====
<a @click="current = 'M' ">
<button> 模板 </button>
</a>
// 缓存组件
<keep-alive>
// 绑定 :is = "动态组件名"
<component :is="current"></component>
</keep-alive>
</div>
</template>
<script>
// 引入文件地址
import L from './components/List.vue'
import M from './components/Modal.vue'
export default {
name: "App",
// 注册组件
components: {
L,
M
},
data() {
return {
current: 'L', // 默认组件名
}
}
}
</script>
<style>
</style>