标签：vue Transition 解构 fade Vue3 组件 message ref 路由

复习作用域插槽

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

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。