Vue3中插槽(slot)的全部使用方法
Vue中的插槽相信使用過Vue的小伙伴或多或少的都用過,但是它的所有用法你是否全部理解呢?本篇文章就為大家?guī)鞻ue3中插槽的全部用法來幫助大家查漏補缺。
什么是插槽
簡單來說就是子組件中的提供給父組件使用的一個坑位,用<slot></slot>
表示,父組件可以在這個坑位中填充任何模板代碼。
比如一個最簡單插槽例子:
//父組件 <template> <div> <Child>Hello Juejin</Child> </div> </template> <script setup lang="ts"> import Child from './Child.vue' </script> //子組件Child <template> <div> <p>1</p> <slot /> <p>2</p> </div> </template>
子組件中的<slot />
便是父組件放在子組件標簽<Child>
之間的內(nèi)容。當然這之間你可以傳入任何代碼片段,都會被放到<slot />
這個位置。
同樣的你也可以在標簽<Child>
之間放入變量,比如
//父組件 <template> <div> <Child>{{ msg }}</Child> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import Child from './Child.vue' const msg = ref('Hello Juejin') </script>
先解釋一下后面頻繁出現(xiàn)的兩個詞 插槽
和插槽內(nèi)容
,防止后面閱讀搞混了:
同樣的 插槽
表示的就是這個msg
變量。所以子組件 插槽
是可以訪問到父組件的數(shù)據(jù)作用域,而插槽內(nèi)容
是無法訪問子組件的數(shù)據(jù)(即父組件中兩個<Child>
之間是不能使用子組件中的數(shù)據(jù)的),這就是所謂的渲染作用域。后面會介紹插槽
向插槽內(nèi)容
傳參的方式
默認內(nèi)容
在父組件沒有提供任何插槽內(nèi)容
的時候,我們是可以為子組件的插槽
指定默認內(nèi)容的,比如
//子組件 <template> <div> <slot>我是默認內(nèi)容</slot> </div> </template> //父組件1 <template> <div> <Child></Child> </div> </template> <script setup> import Child from './Child.vue' </script> //父組件2 <template> <div> <Child>Hello Juejin</Child> </div> </template> <script setup> import Child from './Child.vue' </script>
此時父組件1
展示默認內(nèi)容
父組件2
展示提供的內(nèi)容
具名插槽
很多時候一個 插槽
滿足不了我們的需求,我們需要多個 插槽
。于是就有了具名插槽
,就是具有名字的 插槽
。簡單來說這個具名插槽
的目的就是讓一個蘿卜一個坑,讓它們呆在該呆的位置去。比如帶 name
的插槽 <slot name="xx">
被稱為具名插槽。沒有提供 name
的 <slot>
會隱式地命名為“default”。在父組件中可以使用v-slot:xxx
(可簡寫為#xxx
) 指令的 <template>
元素將目標插槽的名字傳下去匹配對應(yīng) 插槽
。比如
//子組件 <template> <div> <!-- 大蘿卜 --> <div> <slot name="bigTurnip"></slot> </div> <!-- 小蘿卜 --> <div> <slot name="smallTurnip"></slot> </div> <!-- 中蘿卜 --> <div> <slot name="midTurnip"></slot> </div> </div> </template> //父組件 <template> <div> <Child> <!-- #smallTurnip 為v-slot:smallTurnip縮寫 --> <template #smallTurnip> 小蘿卜 </template> <template #midTurnip> 中蘿卜 </template> <template #bigTurnip> 大蘿卜 </template> </Child> </div> </template> <script setup> import Child from './Child.vue' </script>
所以父組件中無需在意順序,只需要寫好模板命好名,它就會自動去到它所對應(yīng)的位置。
動態(tài)插槽名
動態(tài)插槽名就是插槽名變成了變量的形式,我們可以隨時修改這個變量從而展示不同的效果。它的寫法是v-slot:[變量名]
或者縮寫為#[變量名]
。
//父組件 <template> <div> <Child> <!-- 等同于#smallTurnip --> <template #[slotName]> 小蘿卜 </template> <template #midTurnip> 中蘿卜 </template> <template #bigTurnip> 大蘿卜 </template> </Child> </div> </template> <script setup> import { ref } from 'vue' import Child from './Child.vue' const slotName = ref('smallTurnip') </script>
作用域插槽
作用域插槽
上面說過插槽內(nèi)容
是無法訪問子組件的數(shù)據(jù)的,但是如果我們想在插槽內(nèi)容
訪問子組件的狀態(tài)該怎么辦呢?
其實插槽
可以像對組件傳遞 props 那樣,在slot
標簽綁定屬性從而傳遞給父組件中的插槽內(nèi)容
。首先來看下默認插槽的傳值方式
//子組件 <template> <div> <slot personName="xiaoyue" age="18"></slot> </div> </template> //父組件 <template> <div> <Child v-slot="slotProps"> My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year </Child> </div> </template> <script setup> import Child from './Child.vue' </script>
你還可以以結(jié)構(gòu)的形式獲取slot
提供的數(shù)據(jù)
<template> <div> <Child v-slot="{ personName, age }"> My name is {{ personName }} and I am {{ age }} years old this year </Child> </div> </template>
注意不能綁定name
屬性,因為你綁定了name
它就成了具名插槽了。同樣具名插槽中的name
屬性也不會傳遞給插槽內(nèi)容
。因為傳遞的參數(shù)只能在插槽內(nèi)容
中使用,所以這類能夠接受參數(shù)的插槽就被稱為了作用域插槽
。
具名作用域插槽
下面再看下具名作用域插槽
它的傳參方式。它接收參數(shù)的方式是通過template
標簽的指令v-slot
的值獲取的,所以可以縮寫成這樣
//父組件 <template> <div> <Child> <template #bigTurnip="bigTurnipProps"> {{ bigTurnipProps.message }} </template> </Child> </div> </template> <script setup> import Child from './Child.vue' </script> //子組件Child.vue <template> <div> <!-- 大蘿卜 --> <div> <slot name="bigTurnip" message="我是蘿北"></slot> </div> </div> </template>
這類插槽便是具名作用域插槽
啦
寫在最后
到此這篇關(guān)于Vue3中插槽(slot)的全部使用方法的文章就介紹到這了,更多相關(guān)Vue3插槽slot內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
多個vue項目實現(xiàn)共用一個node-modules文件夾
這篇文章主要介紹了多個vue項目實現(xiàn)共用一個node-modules文件夾,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue如何實現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面
這篇文章主要介紹了vue如何實現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面,具有很好的參考價值,希望對大家有所幫助。2022-10-10Vue+tracking.js 實現(xiàn)前端人臉檢測功能
這篇文章主要介紹了Vue+tracking.js 實現(xiàn)前端人臉檢測功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04Vue利用vue-baidu-map實現(xiàn)獲取經(jīng)緯度和搜索地址
在開發(fā)項目的時候,發(fā)現(xiàn)需要獲取經(jīng)緯度,由于這個項目是用vue寫的,最后決定使用vue-baidu-map來快速獲取經(jīng)緯度,感興趣的可以了解一下2022-09-09