动态组件（类似tab切换）

根据点击事件传的id值，去切换的组件的名字，从而切换组件内容

<div id="app"> <com-content :is="com"></com-content> <button @click="changeEvent(1)">首页</button> <button @click="changeEvent(2)">列表</button> <button @click="changeEvent(3)">文章</button> <button @click="changeEvent(4)">个人</button> </div> <script src="http://cdn.staticfile.org/vue/2.6.11/vue.js"></script> <script> let com1=Vue.component('com-content',{ template:` <div>首页内容</div> `, }); let com2=Vue.component('com-content',{ template:` <div>列表内容</div> `, }); let com3=Vue.component('com-content',{ template:` <div>文章内容</div> `, }); let com4=Vue.component('com-content',{ template:` <div>个人内容</div> `, }) new Vue({ el:'#app', data() { return { com:'com1', } }, methods: { changeEvent(id){ console.log(this); this.com=this.$options.components['com'+id] } }, components:{ com1,com2,com3,com4 } }) </script>