多个组件过渡 · vue

参考官方：https://cn.vuejs.org/v2/guide/transitions.html#%E5%A4%9A%E4%B8%AA%E7%BB%84%E4%BB%B6%E7%9A%84%E8%BF%87%E6%B8%A1 ![](https://img.kancloud.cn/c9/c5/c9c5d18049de1e4ac367c3f8e20c12ab_1797x1294.png) # 代码案例： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> </head> <body> <div id="app"> <span @click="changCom('coma')">标签a</span>  <span @click="changCom('comb')">标签b</span> <span @click="changCom('comc')">标签c</span> <transition mode="out-in" name="fade"> <component :is="currentCom"></component>  </transition> </div> </body> </html> <script src="vue/vue.js"></script> <script> coma={ //创建一个组件 template:`<p>this is coma</p>` //组件 A } comb={ //创建一个组件 template:`<p>this is comb</p>` //组件 B } comc={ //创建一个组件 template:`<p>this is comc</p>` //组件 C } var vm=new Vue({ el:'#app', data:{ currentCom:'coma' //动态v- }, components:{ 'coma':coma, //注册组件到父类 'comb':comb, 'comc':comc, }, methods:{ changCom:function (data){ this.currentCom=data //点击获取替换组件 } } }) </script> ~~~