这两天帮朋友写网站，刚好最近学习了vuejs，就试着用vue+bootstrap写了起来，编写过程中实践与理论结合的确学到很多东西，也遇到不少坎儿，不过通过百度以及官网等查资料找到了理想的解决方法，本来tab切换用实现的方法有很多种，也很简单，但是基于本人刚学习vuejs这块内容，感觉开始还是很吃力，在网上找了一些关于vuejs组件的博客，看了之后结合自己的理解，重新整理了下，不废话了直接上代码，请大牛们指导！
//template 模板
<template><div class="source"><div class="tab-title"><p @click="tabToggle(tab1)">tab1</p><p @click="tabToggle(tab2)">tab2</p><p @click="tabToggle(tab3Text)">tab3</p></div><div class="tabs"><component :is='currentView' keep-alive></component></div></div></template>
//js部分
<script type="text/ecmascript-6"> import tab1 from '../tab/tab1' import tab2 from '../tab/tab2' import tab3 from '../tab/tab3' export default { data () { return { tab1: 'tab1', tab2: 'tab2', tab3: 'tab3', currentView: 'tab1' } }, components: { tab1,tab2,tab3 }, methods: { tabToggle (tabText) { this.currentView = tabText } } } </script>
