vue3關(guān)于RouterView插槽和過渡動效
更新時間：2024年06月07日 11:25:54 作者：**之火
這篇文章主要介紹了vue3關(guān)于RouterView插槽和過渡動效,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3 RouterView插槽和過渡動效
RotuerView 組件暴露了一個插槽，可以用來渲染路由組件：
//代碼等價于不帶插槽的 <router-view />
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>RotuerView 結(jié)合KeepAlive & Transition
//1、保持路由組件活躍
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
//2、路由組件之間切換時實(shí)現(xiàn)過渡效果
<router-view v-slot="{ Component }">
<transition>
<component :is="Component" />
</transition>
</router-view>
//3、持路由組件活躍和實(shí)現(xiàn)過渡效果
<router-view v-slot="{ Component }">
<transition>
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>過渡動效
//1、路徑組件上使用轉(zhuǎn)場
//這會對所有的路由使用相同的過渡
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
</transition>
</router-view>
//2、在路由對象的meta屬性上傳參，結(jié)合插槽傳參使用
const routes = [
{
path: '/custom-transition',
component: PanelLeft,
meta: { transition: 'slide-left' },
},
{
path: '/other-transition',
component: PanelRight,
meta: { transition: 'slide-right' },
},
]
<!-- 基于路由的動態(tài)過渡名稱 -->
<router-view v-slot="{ Component, route }">
<transition :name="route.meta.transition || 'fade'">
<component :is="Component" />
</transition>
</router-view>
//3、結(jié)合router.afterEach導(dǎo)航守衛(wèi)，修改route.meta.transition的值
router.afterEach((to, from) => {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
to.meta.transition = toDepth < fromDepth ? 'slide-right' : 'slide-left'
})強(qiáng)制在復(fù)用的視圖之間進(jìn)行過渡–（添加一個 key 屬性來強(qiáng)制過渡）
Vue 可能會自動復(fù)用看起來相似的組件，從而忽略了任何過渡，添加一個 key 屬性解決。
<router-view v-slot="{ Component, route }">
<transition name="fade">
<component :is="Component" :key="route.path" />
</transition>
</router-view>vue3中的插槽使用
vue插槽分三種，默認(rèn)插槽、具名插槽和作用域插槽，實(shí)現(xiàn)在同一個組件中填充不同的內(nèi)容，項(xiàng)目中也經(jīng)常會遇到，自己寫的可以復(fù)用的組件中，經(jīng)常會用到前2種，而UI組件庫中經(jīng)常會用到作用域插槽，記錄一下用法
一、默認(rèn)插槽
想要實(shí)現(xiàn)以下效果：
以下代碼是在Markdown中純手寫，沒有驗(yàn)證，也沒有檢查語法，只記錄關(guān)鍵內(nèi)容
一般默認(rèn)插槽只有一個
- 父組件：
<template>
<div class="content">
<Category title="今日熱門游戲">
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</Category>
<Category title="今日美食城市">
<img :src="imgUrl" alt="">
</Category>
<Category title="今日影視推薦">
<video :src="videoUrl" controls></video>
</Category>
</div>
</template>
<script>
import {ref} from 'vue'
import Category from '@/src/components/Category.vue'
const games = [
{id: 1, name: '英雄聯(lián)盟'},
{id: 2, name: '王者榮耀'},
{id: 3, name: '紅色警戒'},
{id: 4, name: '斗羅大陸'},
]
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped>
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
</style>
- 子組件：
<template>
<div class="item">
<h3>{{ title }}</>
<!-- 默認(rèn)插槽 -->
<slot></slot>
</div>
</template>
<script>
import {ref} from 'vue'
import Category from '@/src/components/Category.vue'
const games = [
{id: 1, name: '英雄聯(lián)盟'},
{id: 2, name: '王者榮耀'},
{id: 3, name: '紅色警戒'},
{id: 4, name: '斗羅大陸'},
]
defineProps(['title'])
</script>
<style lang='scss'>
.item {
height: 200px;
width: 200px;
border-radius: 10px;
box-shadow: 0 0 10px;
padding: 10px;
backgroud-color: skyblue;
.title {
width: 100%;
font-size: 20px;
line-height: 20px;
text-align: center;
backgroud-color: orange;
}
}
</style>
默認(rèn)插槽相對簡單，只用在子組件中寫上<slot></slot>，父組件在對應(yīng)的地方補(bǔ)充想要寫的內(nèi)容即可，加上適當(dāng)?shù)臉邮剑涂梢猿尸F(xiàn)圖片所示的效果了
此外，默認(rèn)插槽其實(shí)有名字，它的名字是#default
二、具名插槽
具名插槽就是給默認(rèn)插槽加上名字（name），父組件使用的時候加上v-slot:name，或者使用語法糖#name，這樣可以讓插槽的作用更具體，同時可以寫多個插槽
- 父組件：
<template>
<div class="father">
<h3>父組件</h3>
<div class="content">
<Category>
<template v-slot:s2>
<ul>
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</template>
<template v-slot:s1>
<h2>熱門游戲列表</h2>
</template>
</Category>
<Category>
<template v-slot:s2>
<img :src="imgUrl" alt="">
</template>
<template v-slot:s1>
<h2>今日美食城市</h2>
</template>
</Category>
<Category>
<template #s2>
<video video :src="videoUrl" controls></video>
</template>
<template #s1>
<h2>今日影視推薦</h2>
</template>
</Category>
</div>
</div>
</template>
<script setup>
import Category from './Category.vue'
import { ref,reactive } from "vue";
let games = reactive([
{id:'asgytdfats01',name:'英雄聯(lián)盟'},
{id:'asgytdfats02',name:'王者農(nóng)藥'},
{id:'asgytdfats03',name:'紅色警戒'},
{id:'asgytdfats04',name:'斗羅大陸'}
])
let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>
- 子組件：
<template>
<div class="category">
<slot name="s1">默認(rèn)內(nèi)容1</slot>
<slot name="s2">默認(rèn)內(nèi)容2</slot>
</div>
</template>
<script setup>
</script>
<style scoped>
.category {
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
padding: 10px;
width: 200px;
height: 300px;
}
</style>
子組件定義了兩個具名插槽，分別是s1和s2，父組件在需要寫插槽的地方，用v-slot:s（或者#s）來聲明這個插槽的位置，即可實(shí)現(xiàn)一個子組件中定義多個插槽，而且在父組件中，具名插槽的位置是任意的，不受寫的位置的影響，只收子組件中位置的影響
三、作用域插槽
前面可以看到，不管是默認(rèn)插槽，還是具名插槽，都用在數(shù)據(jù)父組件給，組件結(jié)構(gòu)子組件給，也就是用父組件的數(shù)據(jù)去填子組件的結(jié)構(gòu)，在部分特定的情況下，子組件沒有向父組件提供數(shù)據(jù)，但又需要使用插槽，這種情況在UI組件庫中非常常見，這樣就需要使用作用域插槽了
- 父組件：
<template>
<div class="father">
<h3>父組件</h3>
<div class="content">
<Game>
<template v-slot="params">
<ul>
<li v-for="y in params.youxi" :key="y.id">
{{ y.name }}
</li>
</ul>
</template>
</Game>
<Game>
<template v-slot="params">
<ol>
<li v-for="item in params.youxi" :key="item.id">
{{ item.name }}
</li>
</ol>
</template>
</Game>
<Game>
<template #default="{youxi}">
<h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
</template>
</Game>
</div>
</div>
</template>
<script setup>
import Game from './Game.vue'
</script>
<style scoped>
.father {
background-color: rgb(165, 164, 164);
padding: 20px;
border-radius: 10px;
}
.content {
display: flex;
justify-content: space-evenly;
}
img,video {
width: 100%;
}
</style>
父組件只提供了結(jié)構(gòu)，但是要注意，它使用了v-slot="params"來接收子組件傳遞的數(shù)據(jù)
- 子組件Game.vue
<template>
<div class="game">
<h2>游戲列表</h2>
<slot :youxi="games" x="哈哈" y="你好"></slot>
</div>
</template>
<script setup>
import {reactive} from 'vue'
let games = reactive([
{id:'asgytdfats01',name:'英雄聯(lián)盟'},
{id:'asgytdfats02',name:'王者農(nóng)藥'},
{id:'asgytdfats03',name:'紅色警戒'},
{id:'asgytdfats04',name:'斗羅大陸'}
])
</script>
<style scoped>
.game {
width: 200px;
height: 300px;
background-color: skyblue;
border-radius: 10px;
box-shadow: 0 0 10px;
}
h2 {
background-color: orange;
text-align: center;
font-size: 20px;
font-weight: 800;
}
</style>
子組件通過自定義屬性的方式，在插槽中傳遞了youxi這個響應(yīng)式的數(shù)據(jù)，以及兩個固定的值x和y
父組件中，通過v-slot="params"接收到的params就是由下面這么個對象：
{
youxi: [...],
x: '哈哈',
y: '你好'
}
子組件沒有對插槽命名，所以可以用#default來具名插槽，同時，因?yàn)閜arams是對象，也可以使用{youxi}這種方式來解構(gòu)
這里的作用域插槽雖然寫的不是UI組件，但卻實(shí)現(xiàn)了父組件使用子組件傳遞過來的數(shù)據(jù)渲染不同的文檔結(jié)構(gòu)
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文將詳細(xì)介紹通過Vue使多元素進(jìn)行過渡動畫,需要的朋友可以參考下2020-02-02
ubuntu中利用nginx部署vue項(xiàng)目的完整步驟
Nginx是一款輕量級的Web服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器,在BSD-like 協(xié)議下發(fā)行,下面這篇文章主要給大家介紹了關(guān)于ubuntu中利用nginx部署vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue中使用微信jssdk，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在Vue3項(xiàng)目中集成CodeMirror創(chuàng)建SQL編輯器的方法詳解
在這篇文章中,我們將學(xué)習(xí)如何在 Vue 3 項(xiàng)目中集成 CodeMirror,以創(chuàng)建一個支持 SQL 語法高亮和自動補(bǔ)全的代碼編輯器,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了vue如何通過日期篩選數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-05-05
vue中的.capture和.self區(qū)分及初步理解
這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Ant Design Upload 文件上傳功能的實(shí)現(xiàn)
這篇文章主要介紹了Ant Design Upload 文件上傳功能的實(shí)現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式
這篇文章主要介紹了vue子元素綁定的事件, 阻止觸發(fā)父級上的事件處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了修改Vue項(xiàng)目運(yùn)行的IP和端口，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03