一個簡單的動態組件的例子 ``` //頁面 <div v-for="item in tabs" :key="item.tab" :class="['menu-item', {active: currentTab == item.tab}]" @click="currentTab = item.tab" ><span>{{item.title}}</span></div> //組件展示: :is是存放子組件的地方， :key是存放刷新時間 <component :is="currentTabComponent" :key="key"></component> //首先import組件進來 import item1 from 'components/item1.vue'; import item2 from 'components/item2.vue'; export default { components: { item1, item2 }, data () { return { currentTab : 'item1', tabs: [{tab: "item1", title: '子組件1'},{tab: "item2", title: '子組件2'}] } }, computed: { //切換組件 currentTabComponent () { return this.currentTab }, //刷新組件 key () { return this.$route.name !== undefined? this.$route.name + new Date() : this.$route + new Date() } } } ```