vue3关于RouterView插槽和过渡动效

每一天平安

vue3 RouterView插槽和过渡动效

RotuerView 组件暴露了一个插槽，可以用来渲染路由组件：

1. //代码等价于不带插槽的 <router-view />
   
2. <router-view v-slot="{ Component }">
   
3.   <component :is="Component" />
   
4. </router-view>

复制代码

RotuerView 结合KeepAlive & Transition

1. //1、保持路由组件活跃
   
2. <router-view v-slot="{ Component }">
   
3.   <keep-alive>
   
4.     <component :is="Component" />
   
5.   </keep-alive>
   
6. </router-view>
   
7. 
   
8. //2、路由组件之间切换时实现过渡效果
   
9. <router-view v-slot="{ Component }">
   
10.   <transition>
    
11.     <component :is="Component" />
    
12.   </transition>
    
13. </router-view>
    
14. 
    
15. //3、持路由组件活跃和实现过渡效果
    
16. <router-view v-slot="{ Component }">
    
17.   <transition>
    
18.     <keep-alive>
    
19.       <component :is="Component" />
    
20.     </keep-alive>
    
21.   </transition>
    
22. </router-view>

复制代码

过渡动效

1. //1、路径组件上使用转场
   
2. //这会对所有的路由使用相同的过渡
   
3. 
   
4. <router-view v-slot="{ Component }">
   
5.   <transition name="fade">
   
6.     <component :is="Component" />
   
7.   </transition>
   
8. </router-view>
   
9. 
   
10. //2、在路由对象的meta属性上传参，结合插槽传参使用
    
11. const routes = [
    
12.   {
    
13.     path: '/custom-transition',
    
14.     component: PanelLeft,
    
15.     meta: { transition: 'slide-left' },
    
16.   },
    
17.   {
    
18.     path: '/other-transition',
    
19.     component: PanelRight,
    
20.     meta: { transition: 'slide-right' },
    
21.   },
    
22. ]
    
23. <!-- 基于路由的动态过渡名称 -->
    
24. <router-view v-slot="{ Component, route }">
    
25.   <transition :name="route.meta.transition || 'fade'">
    
26.     <component :is="Component" />
    
27.   </transition>
    
28. </router-view>
    
29. 
    
30. //3、结合router.afterEach导航守卫，修改route.meta.transition的值
    
31. router.afterEach((to, from) => {
    
32.   const toDepth = to.path.split('/').length
    
33.   const fromDepth = from.path.split('/').length
    
34.   to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    
35. })

复制代码

强制在复用的视图之间进行过渡–（添加一个 key 属性来强制过渡）
Vue 可能会自动复用看起来相似的组件，从而忽略了任何过渡，添加一个 key 属性解决。

1. <router-view v-slot="{ Component, route }">
   
2.   <transition name="fade">
   
3.     <component :is="Component" :key="route.path" />
   
4.   </transition>
   
5. </router-view>

复制代码

vue3中的插槽使用

vue插槽分三种，默认插槽、具名插槽和作用域插槽，实现在同一个组件中填充不同的内容，项目中也经常会遇到，自己写的可以复用的组件中，经常会用到前2种，而UI组件库中经常会用到作用域插槽，记录一下用法

一、默认插槽

想要实现以下效果：

以下代码是在Markdown中纯手写，没有验证，也没有检查语法，只记录关键内容
一般默认插槽只有一个

• 父组件：
  

1. <template>
   
2.     <div class="content">
   
3.             <Category title="今日热门游戏">
   
4.                       <ul>
   
5.                         <li v-for="g in games" :key="g.id">{{ g.name }}</li>
   
6.                       </ul>
   
7.             </Category>
   
8.                 <Category title="今日美食城市">
   
9.                 <img :src="imgUrl" alt="">
   
10.               </Category>
    
11.               <Category title="今日影视推荐">
    
12.                 <video :src="videoUrl" controls></video>
    
13.               </Category>
    
14.         </div>
    
15. </template>
    
16. <script>
    
17.         import {ref} from 'vue'
    
18.         import Category from '@/src/components/Category.vue'
    
19.         const games = [
    
20.         {id: 1, name: '英雄联盟'},
    
21.         {id: 2, name: '王者荣耀'},
    
22.         {id: 3, name: '红色警戒'},
    
23.         {id: 4, name: '斗罗大陆'},
    
24.     ]
    
25.     let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
    
26.           let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
    
27. </script>
    
28. <style scoped>
    
29.   .content {
    
30.     display: flex;
    
31.     justify-content: space-evenly;
    
32.   }
    
33.   img,video {
    
34.     width: 100%;
    
35.   }
    
36. </style>   

复制代码

• 子组件：
  

1. <template>
   
2.     <div class="item">
   
3.         <h3>{{ title }}</>
   
4.                 <!-- 默认插槽 -->
   
5.         <slot></slot>
   
6.     </div>
   
7. </template>
   
8. <script>
   
9.         import {ref} from 'vue'
   
10.         import Category from '@/src/components/Category.vue'
    
11.         const games = [
    
12.         {id: 1, name: '英雄联盟'},
    
13.         {id: 2, name: '王者荣耀'},
    
14.         {id: 3, name: '红色警戒'},
    
15.         {id: 4, name: '斗罗大陆'},
    
16.     ]
    
17.     defineProps(['title'])
    
18. </script>
    
19. <style lang='scss'>
    
20.     .item {
    
21.         height: 200px;
    
22.         width: 200px;
    
23.         border-radius: 10px;
    
24.             box-shadow: 0 0 10px;
    
25.             padding: 10px;
    
26.         backgroud-color: skyblue;
    
27.         .title {
    
28.             width: 100%;
    
29.             font-size: 20px;
    
30.             line-height: 20px;
    
31.             text-align: center;
    
32.             backgroud-color: orange;
    
33.         }
    
34.     }   
    
35. </style>

复制代码

默认插槽相对简单，只用在子组件中写上

1. <slot></slot>

复制代码

，父组件在对应的地方补充想要写的内容即可，加上适当的样式，就可以呈现图片所示的效果了
此外，默认插槽其实有名字，它的名字是#default

二、具名插槽

具名插槽就是给默认插槽加上名字（name），父组件使用的时候加上v-slot:name，或者使用语法糖#name，这样可以让插槽的作用更具体，同时可以写多个插槽

• 父组件：
  

1. <template>
   
2.   <div class="father">
   
3.     <h3>父组件</h3>
   
4.     <div class="content">
   
5.       <Category>
   
6.         <template v-slot:s2>
   
7.           <ul>
   
8.             <li v-for="g in games" :key="g.id">{{ g.name }}</li>
   
9.           </ul>
   
10.         </template>
    
11.         <template v-slot:s1>
    
12.           <h2>热门游戏列表</h2>
    
13.         </template>
    
14.       </Category>
    
15. 
    
16.       <Category>
    
17.         <template v-slot:s2>
    
18.           <img :src="imgUrl" alt="">
    
19.         </template>
    
20.         <template v-slot:s1>
    
21.           <h2>今日美食城市</h2>
    
22.         </template>
    
23.       </Category>
    
24. 
    
25.       <Category>
    
26.         <template #s2>
    
27.           <video video :src="videoUrl" controls></video>
    
28.         </template>
    
29.         <template #s1>
    
30.           <h2>今日影视推荐</h2>
    
31.         </template>
    
32.       </Category>
    
33.     </div>
    
34.   </div>
    
35. </template>
    
36. 
    
37. <script setup>
    
38.   import Category from './Category.vue'
    
39.   import { ref,reactive } from "vue";
    
40. 
    
41.   let games = reactive([
    
42.     {id:'asgytdfats01',name:'英雄联盟'},
    
43.     {id:'asgytdfats02',name:'王者农药'},
    
44.     {id:'asgytdfats03',name:'红色警戒'},
    
45.     {id:'asgytdfats04',name:'斗罗大陆'}
    
46.   ])
    
47.   let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
    
48.   let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
    
49. 
    
50. </script>
    
51. 
    
52. <style scoped>
    
53.   .father {
    
54.     background-color: rgb(165, 164, 164);
    
55.     padding: 20px;
    
56.     border-radius: 10px;
    
57.   }
    
58.   .content {
    
59.     display: flex;
    
60.     justify-content: space-evenly;
    
61.   }
    
62.   img,video {
    
63.     width: 100%;
    
64.   }
    
65.   h2 {
    
66.     background-color: orange;
    
67.     text-align: center;
    
68.     font-size: 20px;
    
69.     font-weight: 800;
    
70.   }
    
71. </style>

复制代码

• 子组件：
  

1. <template>
   
2.   <div class="category">
   
3.     <slot name="s1">默认内容1</slot>
   
4.     <slot name="s2">默认内容2</slot>
   
5.   </div>
   
6. </template>
   
7. 
   
8. <script setup>
   
9.   
   
10. </script>
    
11. 
    
12. <style scoped>
    
13.   .category {
    
14.     background-color: skyblue;
    
15.     border-radius: 10px;
    
16.     box-shadow: 0 0 10px;
    
17.     padding: 10px;
    
18.     width: 200px;
    
19.     height: 300px;
    
20.   }
    
21. </style>

复制代码

子组件定义了两个具名插槽，分别是s1和s2，父组件在需要写插槽的地方，用v-slot:s（或者#s）来声明这个插槽的位置，即可实现一个子组件中定义多个插槽，而且在父组件中，具名插槽的位置是任意的，不受写的位置的影响，只收子组件中位置的影响

三、作用域插槽

前面可以看到，不管是默认插槽，还是具名插槽，都用在数据父组件给，组件结构子组件给，也就是用父组件的数据去填子组件的结构，在部分特定的情况下，子组件没有向父组件提供数据，但又需要使用插槽，这种情况在UI组件库中非常常见，这样就需要使用作用域插槽了

• 父组件：
  

1. <template>
   
2.   <div class="father">
   
3.     <h3>父组件</h3>
   
4.     <div class="content">
   
5.       <Game>
   
6.         <template v-slot="params">
   
7.           <ul>
   
8.             <li v-for="y in params.youxi" :key="y.id">
   
9.               {{ y.name }}
   
10.             </li>
    
11.           </ul>
    
12.         </template>
    
13.       </Game>
    
14. 
    
15.       <Game>
    
16.         <template v-slot="params">
    
17.           <ol>
    
18.             <li v-for="item in params.youxi" :key="item.id">
    
19.               {{ item.name }}
    
20.             </li>
    
21.           </ol>
    
22.         </template>
    
23.       </Game>
    
24. 
    
25.       <Game>
    
26.         <template #default="{youxi}">
    
27.           <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
    
28.         </template>
    
29.       </Game>
    
30. 
    
31.     </div>
    
32.   </div>
    
33. </template>
    
34. 
    
35. <script setup>
    
36.   import Game from './Game.vue'
    
37. </script>
    
38. 
    
39. <style scoped>
    
40.   .father {
    
41.     background-color: rgb(165, 164, 164);
    
42.     padding: 20px;
    
43.     border-radius: 10px;
    
44.   }
    
45.   .content {
    
46.     display: flex;
    
47.     justify-content: space-evenly;
    
48.   }
    
49.   img,video {
    
50.     width: 100%;
    
51.   }
    
52. </style>

复制代码

父组件只提供了结构，但是要注意，它使用了v-slot="params"来接收子组件传递的数据

• 子组件Game.vue
  

1. <template>
   
2.   <div class="game">
   
3.     <h2>游戏列表</h2>
   
4.     <slot :youxi="games" x="哈哈" y="你好"></slot>
   
5.   </div>
   
6. </template>
   
7. 
   
8. <script setup>
   
9.   import {reactive} from 'vue'
   
10.   let games = reactive([
    
11.     {id:'asgytdfats01',name:'英雄联盟'},
    
12.     {id:'asgytdfats02',name:'王者农药'},
    
13.     {id:'asgytdfats03',name:'红色警戒'},
    
14.     {id:'asgytdfats04',name:'斗罗大陆'}
    
15.   ])
    
16. </script>
    
17. 
    
18. <style scoped>
    
19.   .game {
    
20.     width: 200px;
    
21.     height: 300px;
    
22.     background-color: skyblue;
    
23.     border-radius: 10px;
    
24.     box-shadow: 0 0 10px;
    
25.   }
    
26.   h2 {
    
27.     background-color: orange;
    
28.     text-align: center;
    
29.     font-size: 20px;
    
30.     font-weight: 800;
    
31.   }
    
32. </style>

复制代码

子组件通过自定义属性的方式，在插槽中传递了youxi这个响应式的数据，以及两个固定的值x和y
父组件中，通过v-slot="params"接收到的params就是由下面这么个对象：

1. {
   
2.     youxi: [...],
   
3.     x: '哈哈',
   
4.     y: '你好'
   
5. }

复制代码

子组件没有对插槽命名，所以可以用#default来具名插槽，同时，因为params是对象，也可以使用{youxi}这种方式来解构
这里的作用域插槽虽然写的不是UI组件，但却实现了父组件使用子组件传递过来的数据渲染不同的文档结构

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/322385ehn.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！