~~~ .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 2s; } <div id="app"> <transition mode="in-out"> <component :is="type"></component> </transition> <button @click="handleClick">切换</button> </div> Vue.component("child",{ template:"<div>child</div>" }) Vue.component("child-one",{ template:"<div>child-one</div>" }) var vm = new Vue({ el:"#app", data: { type:"child" }, methods: { handleClick() { this.type =(this.type=="child")?"child-one":"child"; } } }) ~~~