主页面代码

<template> <div> <div>#动态组件实现tab切换效果#</div><br><br><br> <div class="div"> <a class="a" href="javascript:void(0);" @click="toggleTabs(first);">{{first}}</a> <a class="a" href="javascript:void(0);" @click="toggleTabs(second);">{{second}}</a> <a class="a" href="javascript:void(0);" @click="toggleTabs(third);">{{third}}</a> </div><!--动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数 --><!--通过mode属性，设置组件切换时候的模式动画效果 --> <transition mode="out-in"><first :is="currentView" keep-alive></first> </transition> </div></template><script>//导入子组件import first from './first';import second from './second';import third from './third';export default {data () {return {first: "first", //导航栏文本1second: "second", //导航栏文本2third: "third", //导航栏文本3currentView: 'first', //默认选中first子组件};}, components: {first, second, third }, methods: {toggleTabs (tabText) {this.currentView = tabText; }} }</script><style scoped> div{width:600px; background:#eeeeee; padding:0 10px;} a{text-decoration: none; color:#000; display: inline-block; width:150px; text-align:center; background:#aaaaaa; padding:10px; }.v-enter,.v-leave-to{opacity:0; transform: translateX(300px);}.v-enter-active,.v-leave-actieve{transition:all 2s ease;}</style>

子组件

first.vue

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

second.vue

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

third.vue

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