Vue.component('tab-home', { template: `<div>Home component</div>`})Vue.component('tab-posts', { template: `<div>Posts component</div>`})Vue.component('tab-archive', { template: `<div>Archive component</div>`})

 Vue.use( TabHome); // 自定義全局組件的時候需要Vue.use();  Vue.component('tab-home', TabHome)); //初始化組件two ----局部組件引入 ，寫在需要的引入的組件，如helloworldimport TabAa from './tab-aa.vue'import TabBb from './tab-bb.vue'import TabCc from './tab-cc.vue'export default {name: 'HelloWorld',components:{TabAa,TabBb,TabCc},three----動態組件（tab切換 使用:is="currentTabComponent"）<template><><buttonv-for="tab in tabs"v-bind:key="tab"v-bind:class="['tab-button', { active: currentTab === tab }]"v-on:click="currentTab = tab">{{ tab }}</button><componentv-bind:is="currentTabComponent"class="tab"></component></div></template>export default {name: 'HelloWorld',components:{TabAa,TabBb,TabCc},data () {return {currentTab: 'Home',tabs: ['Home', 'Posts', 'Archive','Aa','Bb','Cc'],loginType:'username',msg: 'Welcome to Your Vue.js App'}},computed: {currentTabComponent: function () {return 'tab-'+this.currentTab.toLowerCase()}},樣式：.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;}