实现效果：
父组件代码
<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="tabindex"></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',tabindex: 'child1' // 默认选中第一项};},methods: {tabChange(index) {this.tabindex = index;}},components: {child1,child2,child3}};</script><style></style>
子组件：
<style></style><template><div>我是第一个子组件</div></template><script>export default {data() {return {}}}</script>
