vue3關(guān)于RouterView插槽和過(guò)渡動(dòng)效
更新時(shí)間：2024年06月07日 11:25:54 作者：**之火
這篇文章主要介紹了vue3關(guān)于RouterView插槽和過(guò)渡動(dòng)效,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3 RouterView插槽和過(guò)渡動(dòng)效
RotuerView 組件暴露了一個(gè)插槽，可以用來(lái)渲染路由組件：
//代碼等價(jià)于不帶插槽的 <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í)實(shí)現(xiàn)過(guò)渡效果
<router-view v-slot="{ Component }">
<transition>
<component :is="Component" />
</transition>
</router-view>
//3、持路由組件活躍和實(shí)現(xiàn)過(guò)渡效果
<router-view v-slot="{ Component }">
<transition>
<keep-alive>
<component :is="Component" />
</keep-alive>
</transition>
</router-view>過(guò)渡動(dòng)效
//1、路徑組件上使用轉(zhuǎn)場(chǎng)
//這會(huì)對(duì)所有的路由使用相同的過(guò)渡
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
</transition>
</router-view>
//2、在路由對(duì)象的meta屬性上傳參，結(jié)合插槽傳參使用
const routes = [
{
path: '/custom-transition',
component: PanelLeft,
meta: { transition: 'slide-left' },
},
{
path: '/other-transition',
component: PanelRight,
meta: { transition: 'slide-right' },
},
]
<!-- 基于路由的動(dòng)態(tài)過(guò)渡名稱 -->
<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)行過(guò)渡–（添加一個(gè) key 屬性來(lái)強(qiáng)制過(guò)渡）
Vue 可能會(huì)自動(dòng)復(fù)用看起來(lái)相似的組件，從而忽略了任何過(guò)渡，添加一個(gè) 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)在同一個(gè)組件中填充不同的內(nèi)容，項(xiàng)目中也經(jīng)常會(huì)遇到，自己寫(xiě)的可以復(fù)用的組件中，經(jīng)常會(huì)用到前2種，而UI組件庫(kù)中經(jīng)常會(huì)用到作用域插槽，記錄一下用法
一、默認(rèn)插槽
想要實(shí)現(xiàn)以下效果：
以下代碼是在Markdown中純手寫(xiě)，沒(méi)有驗(yàn)證，也沒(méi)有檢查語(yǔ)法，只記錄關(guān)鍵內(nèi)容
一般默認(rèn)插槽只有一個(gè)
- 父組件：
<template>
<div class="content">
<Category title="今日熱門(mén)游戲">
<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)插槽相對(duì)簡(jiǎn)單，只用在子組件中寫(xiě)上<slot></slot>，父組件在對(duì)應(yīng)的地方補(bǔ)充想要寫(xiě)的內(nèi)容即可，加上適當(dāng)?shù)臉邮?，就可以呈現(xiàn)圖片所示的效果了
此外，默認(rèn)插槽其實(shí)有名字，它的名字是#default
二、具名插槽
具名插槽就是給默認(rèn)插槽加上名字（name），父組件使用的時(shí)候加上v-slot:name，或者使用語(yǔ)法糖#name，這樣可以讓插槽的作用更具體，同時(shí)可以寫(xiě)多個(gè)插槽
- 父組件：
<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>熱門(mén)游戲列表</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>
子組件定義了兩個(gè)具名插槽，分別是s1和s2，父組件在需要寫(xiě)插槽的地方，用v-slot:s（或者#s）來(lái)聲明這個(gè)插槽的位置，即可實(shí)現(xiàn)一個(gè)子組件中定義多個(gè)插槽，而且在父組件中，具名插槽的位置是任意的，不受寫(xiě)的位置的影響，只收子組件中位置的影響
三、作用域插槽
前面可以看到，不管是默認(rèn)插槽，還是具名插槽，都用在數(shù)據(jù)父組件給，組件結(jié)構(gòu)子組件給，也就是用父組件的數(shù)據(jù)去填子組件的結(jié)構(gòu)，在部分特定的情況下，子組件沒(méi)有向父組件提供數(shù)據(jù)，但又需要使用插槽，這種情況在UI組件庫(kù)中非常常見(jiàn)，這樣就需要使用作用域插槽了
- 父組件：
<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"來(lái)接收子組件傳遞的數(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>
子組件通過(guò)自定義屬性的方式，在插槽中傳遞了youxi這個(gè)響應(yīng)式的數(shù)據(jù)，以及兩個(gè)固定的值x和y
父組件中，通過(guò)v-slot="params"接收到的params就是由下面這么個(gè)對(duì)象：
{
youxi: [...],
x: '哈哈',
y: '你好'
}
子組件沒(méi)有對(duì)插槽命名，所以可以用#default來(lái)具名插槽，同時(shí)，因?yàn)閜arams是對(duì)象，也可以使用{youxi}這種方式來(lái)解構(gòu)
這里的作用域插槽雖然寫(xiě)的不是UI組件，但卻實(shí)現(xiàn)了父組件使用子組件傳遞過(guò)來(lái)的數(shù)據(jù)渲染不同的文檔結(jié)構(gòu)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文將詳細(xì)介紹通過(guò)Vue使多元素進(jìn)行過(guò)渡動(dòng)畫(huà),需要的朋友可以參考下2020-02-02
ubuntu中利用nginx部署vue項(xiàng)目的完整步驟
Nginx是一款輕量級(jí)的Web服務(wù)器/反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器,在BSD-like 協(xié)議下發(fā)行,下面這篇文章主要給大家介紹了關(guān)于ubuntu中利用nginx部署vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue中使用微信jssdk，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
在Vue3項(xiàng)目中集成CodeMirror創(chuàng)建SQL編輯器的方法詳解
在這篇文章中,我們將學(xué)習(xí)如何在 Vue 3 項(xiàng)目中集成 CodeMirror,以創(chuàng)建一個(gè)支持 SQL 語(yǔ)法高亮和自動(dòng)補(bǔ)全的代碼編輯器,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了vue如何通過(guò)日期篩選數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
vue中的.capture和.self區(qū)分及初步理解
這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Ant Design Upload 文件上傳功能的實(shí)現(xiàn)
這篇文章主要介紹了Ant Design Upload 文件上傳功能的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue子元素綁定的事件, 阻止觸發(fā)父級(jí)上的事件處理方式
這篇文章主要介紹了vue子元素綁定的事件, 阻止觸發(fā)父級(jí)上的事件處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了修改Vue項(xiàng)目運(yùn)行的IP和端口，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03