Vue 組件間實(shí)行 transition效果切換的問(wèn)題?

你這樣的寫(xiě)法沒(méi)試過(guò)，也不知道有沒(méi)有用，下面這個(gè)是在官網(wǎng)的寫(xiě)法上補(bǔ)全了點(diǎn)擊事件

<button type="button" @click="changeComponent('v-a')">Component A</button>
<button type="button" @click="changeComponent('v-b')">Component B</button>
<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>
<script>
    new Vue({
      el: '#transition-components-demo',
      data: {
        view: 'v-a'
      },
      components: {
        'v-a': {
          template: '<div>Component A</div>'
        },
        'v-b': {
          template: '<div>Component B</div>'
        }
      },
      methods: {
          changeComponent (component) {
              this.view = component;
          }
      }
    })
</script>
<style>
    .component-fade-enter-active, .component-fade-leave-active {
      transition: opacity .3s ease;
    }
    .component-fade-enter, .component-fade-leave-to
    /* .component-fade-leave-active for below version 2.1.8 */ {
      opacity: 0;
    }
</style>

自己參照vue官網(wǎng)的多組件過(guò)渡效果
https://cn.vuejs.org/v2/guide...