案例效果：
实现代码：
<!DOCTYPE html><html><head><title>动态组件</title><style>.tab-button {padding: 6px 10px;border-top-left-radius: 3px;border-top-right-radius: 3px;border: 1px solid #ccc;cursor: pointer;background: #f0f0f0;margin-bottom: -1px;margin-right: -1px;}.tab-button:hover {background: #e0e0e0;}.tab-button.active {background: #e0e0e0;}.tab {border: 1px solid #ccc;padding: 10px;}.slide-enter{opacity: 0;}.slide-enter-active{transition: all 1s ease;}.slide-enter-to{opacity:1;}</style></head><body><div id="app" class="demo"><button v-for="(tab,index) in tabs" :key="tab" :class="['tab-button', { active: currentTab === index }]" @click="currentTab = index">{{ tab }}</button><!-- 动态组件 --><transition name="slide"><component :is="currentTabComponent" class="tab"></component></transition></div><script src="./js/vue.js"></script><script>//全局注册组件ponent("tab-home", {template: "<div>首页组件</div>"});ponent("tab-posts", {template: "<div>帖子组件</div>"});ponent("tab-archive", {template: "<div>档案组件</div>"});new Vue({el: "#app",data: {currentTab: 0,tabs: ["首页", "帖子", "档案"],tabComponent:["tab-Home", "tab-Posts", "tab-Archive"],},/* 计算属性 */computed: {currentTabComponent: function() {return this.tabComponent[this.currentTab].toLowerCase();}}});</script></body></html>
欢迎大家阅读，本人见识有限，写的博客难免有错误或者疏忽的地方，还望各位指点，在此表示感激不尽。文章持续更新中…
