Vue ＜transition＞ 多个组件的过渡案例

<!-- Vue <transition> 多个组件的过渡案例 -->
<!--
多个元素之间的过渡，使用key属性来实现
多个组件之间的过渡，使用动态组件来实现
-->
<template>
  <div class="page">
    <div>
      <!--
      在<input>上设置id属性
      在<label>上设置for属性
      让 id属性的值 = for属性的值，就可以实现radio的点击联动效果
      这里注意：必须是<label>上的for属性，其他元素不好使
      -->
      <input id="a" type="radio" v-model="view" value="componentA"><label for="a">a</label>
      <input id="b" type="radio" v-model="view" value="componentB"><label for="b">b</label>
    </div>
    <transition name="component-fade" mode="out-in">
      <!--
      动态组件
      is属性的值为组件名
      -->
      <component :is="view"></component>
    </transition>
  </div>
</template>

<script>
  /*
  * 导入componentA和componentB组件
  * 注意：
  *   @ 代表根元素src
  * */
  import componentA from '@/components/componentA.vue'
  import componentB from '@/components/componentB.vue'
  export default {
    name: 'HelloWorld',
    data() {
      return {
        view: 'componentA'
      }
    },
    components: {
      componentA,
      componentB
    },
    computed: {},
    methods: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity 0.3s ease;
}
.component-fade-enter, .component-fade-leave-to {
  opacity: 0;
}
</style>

<template>
    <div>
      <h1>这是组件A</h1>
    </div>
</template>

<script>
    export default {
        name: "componentA"
    }
</script>

<style scoped>

</style>

<template>
    <div>
      <h1>这是组件B</h1>
    </div>
</template>

<script>
    export default {
        name: "componentB"
    }
</script>

<style scoped>

</style>