vue中slot插槽的參數(shù)匯總及使用方案
更新時間：2024年03月15日 08:20:13 作者：背著紅書包上學(xué)
Vue.js中的插槽（slot）是一種機制，允許你在組件的模板中預(yù)留一些位置，以便父組件可以將任意內(nèi)容插入到這些位置，這使得組件更加靈活和可復(fù)用，本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下
小小插槽一會標(biāo)簽<slot></slot>，一會屬性v-slot,一會#的，到底是怎么用，列個表一眼看明白。
| 默認(rèn)插槽 | 具名插槽 | 作用域插槽 | |
|---|---|---|---|
| 定義 | <slot></slot> | <slot name="header"></slot> | v-bind:user="user" |
| 使用 | v-slot | v-slot:header | v-slot="slotProps" v-slot:default="{ user }" v-slot:other="slotProps" |
| 縮寫使用 | #default | #header | #default="{ user }" |
注意 v-slot 只能添加在 <template> 上
最簡單的定義及使用
<button>
<slot>這是當(dāng)使用的時候沒傳參的時候顯示的內(nèi)容</slot>
</button>
<child>編輯</child>
<button>編輯</button>
定義的child組件，如果沒有寫<slot></slot>那使用的時候不管<child></child>標(biāo)簽里面寫什么內(nèi)容都會丟失。
定義<slot></slot>后，如果<child></child>使用的時候里面什么都沒寫那渲染結(jié)果為<slot></slot>標(biāo)簽里面的內(nèi)容。
具名插槽的使用
一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”。
<div class="title">
<slot>標(biāo)題位置</slot>
</div>
<div class="subtitle">
<slot name="subTitle">這是副標(biāo)題</slot>
</div>
<child>
默認(rèn)插槽，可以寫template v-slot:default也可以不寫
<h3>我還能加個標(biāo)簽</h3>
<template v-slot:subtitle>這是副標(biāo)題</template>
這個地方也是默認(rèn)插槽里面的
</child>
<div class="title">
默認(rèn)插槽，可以寫template v-slot:default也可以不寫
<h3>我還能加個標(biāo)簽</h3>
這個地方也是默認(rèn)插槽里面的
</div>
<div class="subtitle">這是副標(biāo)題</div>
任何沒有被包裹在帶有 v-slot 的 <template> 中的內(nèi)容都會被視為默認(rèn)插槽的內(nèi)容。
然而，如果想更明確一些，仍然可以在一個 <template> 中包裹默認(rèn)插槽的內(nèi)容
作用域插槽默認(rèn)使用方法
父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。
想讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)就用到了作用域
<div class="title">
<slot v-bind:user="user">{{ user.firstName }}</slot>
<!-- 簡寫：
<slot :user="user">{{ user.firstName }}</slot> -->
</div>
<script setup>
import { reactive } from "vue";
const user = reactive({
firstName: "Zhang",
lastName: "San",
});
</script>
獨占默認(rèn)插槽的縮寫語法
<child v-slot="slotProps">
我的名字是{{ slotProps.user.lastName }}
</child>
<div class="title">我的名字是San</div>
終級 - 作用域+命名插槽使用方法
只要出現(xiàn)多個插槽，請始終為所有的插槽使用完整的基于 <template> 的語法
<div class="title">
<slot :user="user">標(biāo)題位置</slot>
</div>
<div class="subtitle">
<slot name="subTitle" :user="user">這是副標(biāo)題</slot>
</div>
<script setup>
import { reactive } from "vue";
const user = reactive({
firstName: "Zhang",
lastName: "San",
});
</script>
<child>
<template v-slot="slotProps">
有命名插槽的時候v-slot就不能寫到child標(biāo)簽里面了 {{slotProps.user.firstName}}
</template>
<template v-slot:subTitle="{user}">{{user.lastName}}</template>
</child>
<child>
<template #default="{ user }">
有命名插槽的時候v-slot就不能寫到child標(biāo)簽里面了 {{ user.firstName }}
</template>
<template #subTitle="{ user: { lastName } }">{{ lastName }}</template>
</child>
<div class="title">有命名插槽的時候v-slot就不能寫到child標(biāo)簽里面了 Zhang</div> <div class="subtitle">San</div>
到此這篇關(guān)于vue中slot插槽的參數(shù)匯總及使用方案的文章就介紹到這了,更多相關(guān)vue slot插槽匯總及使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淘寶大家都使用過，淘寶滑動驗證碼的目的是為了驗證到底是人還是機器，今天小編給大家分享的是模仿淘寶滑動驗證碼的樣式，感興趣的朋友跟隨小編一起看看吧2019-12-12
這篇文章主要介紹了跟混亂的頁面彈窗說再見，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue密碼登陸加密RSA實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue.js?以其簡單易用和靈活性受到了廣大開發(fā)者的喜愛,然而,隨著項目的復(fù)雜度增加,組件的管理和組織也變得越來越重要,下面我們就來看看如何通過vue-class-component編寫更加優(yōu)雅和結(jié)構(gòu)化的組件2024-11-11
這篇文章主要介紹了vue如何監(jiān)聽某個元素的大小變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
下面小編就為大家分享一篇Vue修改mint-ui默認(rèn)樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了詳解vue組件化開發(fā)-vuex狀態(tài)管理庫，具有一定的參考價值，有興趣的可以了解一下。2017-04-04
本篇文章主要介紹了在Vue中使用Compass的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue移動端html5頁面根據(jù)屏幕適配的四種解決方法
在vue移動端h5頁面當(dāng)中，其中適配是經(jīng)常會遇到的問題，這塊主要有四個方法可以適用。這篇文章主要介紹了vue移動端h5頁面根據(jù)屏幕適配的四種方案 ,需要的朋友可以參考下2018-10-10
這篇文章主要為大家詳細(xì)介紹了vue3.0實現(xiàn)下拉菜單的封裝代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09