Vue3 Transition 过渡效果之切换路由组件

复习作用域插槽

组件可以被插入些许节点作为其子节点，插槽<slot>就是一个接口（或桥梁）引导这些节点进入组件。这些节点应该被渲染到组件里的具体哪个位置，就是具名插槽的作用。就像是给手机冲点的充电头和插座（接口），手机总得收到电，而这里的电就是从插座里得来的，即作用域插槽的作用。对于组件来说，组件内部定义的数据无法向上传递给父组件调用。请看下面：

定义组件 MyComponent.vue，插槽<slot>绑定两个属性：

<template>
  <div class="my-component">
    <slot :text="greetingMessage" :count="num"></slot>
  </div>
</template>

这里的 App.vue 就是组件 MyComponent 的父组件，父组件得到从子组件插槽向上传递过来的值该如何使用？请看下面：

<template>
  <MyComponent v-slot="slotProps">
    <span class="count">Count: {{ slotProps.count }}</span>
    <span class="message">Message: {{ slotProps.text }}</span>
  </MyComponent>
</template>

在子组件中使用v-slot指令获得数据，在插槽上绑定的数据全都被装载进了一个对象里，也就是说在子组件中定义的所有变量都直接当作了一个对象传递给了 slotProps。观察下图：

解构赋值

ES6 中解构赋值可以对对象进行解构，解构 slotProps 如下：

<MyComponent v-slot="{ text, count }">
  <!-- ...... -->
  <span class="message">Message: {{ text }} : {{ count }}</span>
</MyComponent>

路由组件的过渡效果

普通的组件切换过渡效果是被内置组件<Transistion>包裹起来的。路由组件的切换实现过渡效果在 Vue3 发生了改变。下面是解构并重命名变量的代码：

<router-view v-slot="{ Component: widget }">
  <Transition name="fade">
    <component :is="widget" />
  </Transition>
</router-view>

注意，路由组件<router-view>使用了插槽，通过解构赋值得到Component对象，即切换的组件的对象。再把Component对象传递给动态组件<component>，动态组件被过渡组件<Transition>包裹，然后运用各阶段的 CSS 样式实现过渡效果。

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

演示效果：