复习作用域插槽

父组件可以给子组件（具有插槽的组件）传递值，并且这个值可以随意使用：

MyComponent.vue：

<script>
import { ref } from 'vue';
let greetingMessage = ref("Hello Vue!");
let num = ref(1);
</script>

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

App.vue：

<script>
import { ref } from 'vue';
let message = ref("Hello Vue!");
</script>

<template>
  <MyComponent>
    <div class="title">Title: {{ message }}</div>
	<!-- 绑定在在子组件 slot 上的变量无法被父组件使用 -->
    <span class="count">Count: {{ count }}</span>
    <span class="tail">GreetingMessage: {{ greetingMessage }}</span>
  </MyComponent>
</template>

message 是定义在父组件中的，父组件的变量可以流向子组件。但是<MyComponent>中定义的任何变量（greetingMessage 以及 count）都不可以被父组件使用，否则必须使用作用域插槽：

<MyComponent v-slot="slotProps">
  <div class="title">Title: {{ message }}</div>
  <span class="count">Count: {{ slotProps.count }}</span>
  <span class="tail">GreetingMessage: {{ slotProps.text }}</span>
</MyComponent>

我们在子组件中定义的所有变量都直接当作了一个对象传递给了 slotProps。观察下图：

解构赋值

对于 slotProps，我们可以使用解构赋值进行简单化：

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

路由组件的过渡效果

普通的组件切换过渡效果是被内置组件<Transistion>包裹起来的。路由组件的切换实现过渡效果在 Vue3 发生了改变：

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

我们还可以给解构赋值出来的变量重命名：

<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;
}

标签：vue,Transition,解构,fade,Vue3,组件,message,ref,路由
来源： https://www.cnblogs.com/shiramashiro/p/16552685.html