vue动态组件

<template>
    <div class="move-block">
   	    <h2>动态组件</h2>
        <div>
   		    <button
   			    v-for="tab in tabs"
   			    :key="tab.name"
   			    :class="['tab-button',{active:currentTab.name === tab.name}]"
   			    @click="currentTab = tab"
   			    >
            {{tab.name}}
            </button>
   		    <component
   			    :is="currentTab.component"
   			    class="tab"
   			    >	
   		    </component>
       </div>
    </div>
</template>
<script>
import AlertBox from '@/components/alertBox/alertBox.vue'
var tabs = [
	  {
	    name: 'Home', 
	    component: AlertBox 
	  },
	  {
	    name: 'Posts',
	    component: {
	      template: '<div>Posts component</div>'
	    }
	  },
	  {
	    name: 'Archive',
	    component: {
	      template: '<div>Archive component</div>',
	    }
	  }
	]
  export default {
    data() {
      return {
        tabs:tabs,
		currentTab: tabs[0]
      };
    },
    components: {
	   AlertBox
	},
  };
</script>
<style lang='less'>
.move-block{
	color: orangered;
}
.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;
}
</style>