一个简单的动态组件的例子 ``` //页面 <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() } } } ```