02#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>

路由组件的过渡效果

1️⃣用内置组件<Transistion>包裹路由组件：

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

2️⃣通过解构赋值得到Component对象，并重命名为 widget。再把widget传递给组件<component>。

3️⃣添加过渡各个阶段的 CSS 样式：

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

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}