tab选项卡动态切换不同组件

tab选项卡

vue tab切换 动态加载不同的组件

主页面代码如下，分别导入了child1.vue, child2.vue, child3.vue 3个小模块，当点击页面某一项的时候去加载不同的组件。

##父组件

		< template > 
		  < div > 
		    < h2 > vue动态组件实现tab切换加载不同的小模块</ h2 > 
		    < div > 
		      < a href ="javascript:void(0)" @click ="tabChange(child1 )" >第一项</ a > 
		      < a href ="javascript:void(0)" @click ="tabChange(child2)" >第二项</ a > 
		      < a href ="javascript:void(0) "@click ="tabChange(child3)">第三项</ a > 
		    </ div > 
		    <!--
		      动态地绑定到它的is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。
		    --> 
		    < div :is ="currentView" ></ div > 
		  </ div > 
		</ template >
		
		< script > 
		 // 导入子组件
		import child1 from ' @/components/child1 ' ;
		 import child2 from ' @/components/child2 ' ;
		 import child3 from ' @/components/child3 ' ;
		
		 export default {
		   data () {
		     return {
		       child1: ' child1 ' ,
		       child2: ' child2 ' ,
		       child3: ' child3 ' ,
		       currentView: ' child1 '  // 默认选中第一项
		     };
		   },
		   methods: {
		     tabChange(tabItem) {
		       this .currentView = tabItem;
		     }
		   },
		   components: {
		     child1,
		     child2,
		     child3
		   }
		 };
		</ script >

子组件

			< template > 
			  < div >我是第一个子组件</ div > 
			</ template >
			
			< script > 
			  export default {
			    data() {
			      return {
			      }
			    }
			  }
			</ script >

< template > 
  < div >我是第二个子组件</ div > 
</ template >

< script > 
  export default {
    data() {
      return {
      }
    }
  }
</ script >

< template > 
  < div >我是第三个子组件</ div > 
</ template >

< script > 
  export default {
    data() {
      return {
      }
    }
  }
</ script >