vue 实现tab切换动态加载不同的组件
使用vue中的is特性来加载不同的组件。具体看如下代码；这个功能对于vue比较复杂的页面可以使用上，可以把一个页面的功能拆分出来，使代码更简单。使用方式具体看如下代码：
主页面代码如下，分别导入了child1.vue, child2.vue, child3.vue 3个小模块，当点击页面某一项的时候去加载不同的组件。
<style></style><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>
子组件child1.vue代码如下：
<style></style><template><div>我是第1个子组件</div></template><script>export default {data() {return {}}}</script>
子组件child2.vue代码如下：
<style></style><template><div>我是第2个子组件</div></template><script>export default {data() {return {}}}</script>
子组件child3.vue代码如下：
<style></style><template><div>我是第3个子组件</div></template><script>export default {data() {return {}}}</script>
