vue动态组件

在components中创建Tab1.vue和Tab2.vue两个组件
用以下代码创建动态组件

<components :is="type"></components>

在App中代码如下，可以实现动态组件的切换

<template>
  <div>
	<span @click="type = 'Tab1'">Tab1</span>
	<span @click="type = 'Tab2'">Tab2</span>
	<!-- <p @click="tab1">Tab1</p>
	<p @click="tab2">Tab2</p> -->
	<components :is="type"></components>
  </div>
</template>

<script>

import Tab1 from "./components/Tab1";
import Tab2 from "./components/Tab2";
export default {
  	name:"app",
	components:{
		Tab1,
		Tab2
	},
	data(){
		return{
			type:''
		}
	},
	methods:{
		// tab1(){
		// 	this.type = 'Tab1'
		// },
		// tab2(){
		// 	this.type = 'Tab2'
		// }
		
	}

}