＜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>