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 >
