二、封装成插槽

2.1 在全局组件中新建文件写入

2.2 封装。

直接上代码：

<template>
    <div>
        <transition>
            <slot name="fade"></slot> //插槽的名称
        </transition> //动画需要的标签
    </div>
</template>
<script>
    export default {
        name:"Fade"
    }
</script>
<style scoped>
    .v-leave,.v-enter-to{
    opacity: 1; //固定写法
  }
  .v-leave-active,.v-enter-active{
    transition: opacity 2s; //过渡时间
  }
  .v-leave-to,.v-enter{
    opacity: 0; //固定写法
  }
</style>

2.3调用

<template>
  <div class="about">
    <fade>
      <h1 slot="fade" v-show="isShow">This is an about page</h1>
   </fade>  //调用插槽
  </div>
</template>
<script>
import Fade from "../components/Fade" //引入文件
export default {
  components:{
    Fade   //注册
  }
}
</script>