多個組件過渡 · 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> ~~~