其他分享
首页 > 其他分享> > Vue3 Transition 过渡效果之切换路由组件

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

作者:互联网

复习作用域插槽

父组件可以给子组件(具有插槽的组件)传递值,并且这个值可以随意使用:

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。观察下图:

image

解构赋值

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

image

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