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、路由組件之間切換時實現(xiàn)過渡效果
<router-view v-slot="{ Component }">
<transition>
<component :is="Component" />
</transition>
</router-view>
//3、持路由組件活躍和實現(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導航守衛(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'
})強制在復用的視圖之間進行過渡–（添加一個 key 屬性來強制過渡）
Vue 可能會自動復用看起來相似的組件，從而忽略了任何過渡，添加一個 key 屬性解決。
<router-view v-slot="{ Component, route }">
<transition name="fade">
<component :is="Component" :key="route.path" />
</transition>
</router-view>vue3中的插槽使用
vue插槽分三種，默認插槽、具名插槽和作用域插槽，實現(xiàn)在同一個組件中填充不同的內(nèi)容，項目中也經(jīng)常會遇到，自己寫的可以復用的組件中，經(jīng)常會用到前2種，而UI組件庫中經(jīng)常會用到作用域插槽，記錄一下用法
一、默認插槽
想要實現(xiàn)以下效果：
以下代碼是在Markdown中純手寫，沒有驗證，也沒有檢查語法，只記錄關(guān)鍵內(nèi)容
一般默認插槽只有一個
- 父組件：
<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 }}</>
<!-- 默認插槽 -->
<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>
默認插槽相對簡單，只用在子組件中寫上<slot></slot>，父組件在對應(yīng)的地方補充想要寫的內(nèi)容即可，加上適當?shù)臉邮剑涂梢猿尸F(xiàn)圖片所示的效果了
此外，默認插槽其實有名字，它的名字是#default
二、具名插槽
具名插槽就是給默認插槽加上名字（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">默認內(nèi)容1</slot>
<slot name="s2">默認內(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）來聲明這個插槽的位置，即可實現(xià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來具名插槽，同時，因為params是對象，也可以使用{youxi}這種方式來解構(gòu)
這里的作用域插槽雖然寫的不是UI組件，但卻實現(xiàn)了父組件使用子組件傳遞過來的數(shù)據(jù)渲染不同的文檔結(jié)構(gòu)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue進行前端開發(fā)中事件處理是必不可少的功能,下面這篇文章主要給大家介紹了關(guān)于VUE事件處理之@click用法的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了如何在vue中使用ant-design-vue組件,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
最近因為three.js的項目要用Vue.js,下面這篇文章主要給大家介紹了關(guān)于vue中使用three.js報錯的解決方法,文中通過圖文以及示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
在使用 Vue 開發(fā)的這幾年里，掌握一些有用的技巧，使用一些更高級的技術(shù)點，總會有用的，本文就介紹了15個Vue技巧，具有一定的參考價值，感興趣的可以了解一下2022-02-02
這篇文章主要為大家詳細介紹了Vue彈窗組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue項目啟動如何設(shè)置默認啟動頁問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細介紹了vue+animation實現(xiàn)翻頁動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了使用vue開發(fā)移動端管理后臺的注意事項,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue created鉤子函數(shù)與mounted鉤子函數(shù)的用法區(qū)別
這篇文章主要介紹了vue created鉤子函數(shù)與mounted鉤子函數(shù)的用法區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11