Vue深入理解插槽slot的使用
一、插槽(slot)是什么
slot是組件內(nèi)的一個(gè)占位符，該占位符可以在后期使用自己的標(biāo)記語(yǔ)言填充。
作用：讓父組件可以向子組件指定位置插入html結(jié)構(gòu)，也是一種組件間通信方式，適用于父組件===>子組件
例子：
//父組件中 <Category> <div>html結(jié)構(gòu)</div> </Category> //子組件中： <template> <div> <slot>插槽的默認(rèn)內(nèi)容</slot> </div> </template>
二、使用場(chǎng)景
- 通過(guò)插槽可以讓用戶(hù)拓展組件，去更好地復(fù)用組件和對(duì)其做定制化處理；
- 如果父組件在使用到一個(gè)復(fù)用組件的時(shí)候，這個(gè)組件在不同的地方有少量的更改，如果去重寫(xiě)組件是很浪費(fèi)，這時(shí)，通過(guò)slot插槽向組件內(nèi)部指定位置傳遞內(nèi)容，完成這個(gè)復(fù)用組件在不同場(chǎng)景的應(yīng)用。
- 比如：布局組件、表格列、下拉選項(xiàng)、彈框顯示內(nèi)容等。
三、slot的分類(lèi)
默認(rèn)插槽
子組件用<slot>來(lái)標(biāo)記渲染的位置，在父組件的自定義標(biāo)簽中寫(xiě)slot中的結(jié)構(gòu)。如果在子組件的<slot>中寫(xiě)了結(jié)構(gòu)，那么會(huì)作為默認(rèn)顯示的內(nèi)容。
//父組件（數(shù)據(jù)在父組件中）
<template>
<div id="app">
<Category title="美食">
<ul>
<li v-for="(item,key) in foods" :key="key">{{item}}</li>
</ul>
</Category>
<Category title="游戲">
<ul>
<li v-for="(item,key) in games" :key="key">{{item}}</li>
</ul>
</Category>
<Category title="電影"></Category>
</div>
</template>
//子組件
<template>
<div class="category">
<h3>{{title}}分類(lèi)</h3>
<slot>默認(rèn)顯示內(nèi)容</slot>
</div>
</template>效果：
具名插槽
為每個(gè)slot標(biāo)記名字，也是處理具有多個(gè)插槽時(shí)的對(duì)應(yīng)關(guān)系，標(biāo)記名字的方法有兩個(gè)：
方法1：
//父組件
<Category title="美食">
<ul slot="foods">
<li v-for="(item,key) in foods" :key="key">{{item}}</li>
</ul>
</Category>
//子組件
<h3>{{title}}分類(lèi)</h3>
<slot name="foods">默認(rèn)顯示內(nèi)容</slot> /*給插槽取名*/方法2：此時(shí)必須標(biāo)記在template標(biāo)簽上
<template v-slot:foods>
<ul>
<li v-for="(item,key) in foods" :key="key">{{item}}</li>
</ul>
</template>
作用域插槽
當(dāng)元素在子組件中時(shí)，想實(shí)現(xiàn)上述操作，就會(huì)造成數(shù)據(jù)獲取不到的問(wèn)題，這時(shí)就可以使用作用域插槽，作用域這三個(gè)字就體現(xiàn)在數(shù)據(jù)的作用域上。
//父組件
<template>
<div id="app">
<Category title="美食">
<template scope="foods">
<ul>
<li v-for="(item, key) in foods.foods" :key="key">{{ item }}</li>
</ul>
</template>
</Category>
<Category title="美食">
<template scope="foods">
<!-- <template slot-scope="foods"> -->
<ol>
<li v-for="(item, key) in foods.foods" :key="key">{{ item }}</li>
</ol>
</template>
</Category>
</div>
</template>
//子組件：數(shù)據(jù)在子組件中
<template>
<div class="category">
<h3>{{ title }}分類(lèi)</h3>
<slot :foods="foods">默認(rèn)顯示內(nèi)容</slot>
</div>
</template>可以通過(guò)解構(gòu)獲得slot-scope={foods}，還可以重命名slot-scope={new:foods}
四、介紹對(duì)slot的理解
回答：slot就是插槽，主要的作用就是拓展組件，在重復(fù)使用一個(gè)組件的時(shí)候可以通過(guò)少量的修改就達(dá)到復(fù)用的效果。分成默認(rèn)插槽、具名插槽和作用域插槽。其中前兩個(gè)都是元素在父組件中，拓展的結(jié)構(gòu)也在父組件中，直接在子組件中占位，在父組件中添加結(jié)構(gòu)即可，區(qū)別就是具名插槽給插槽取了名字，多個(gè)插槽存在時(shí)可以一一對(duì)應(yīng)。而作用域插槽的數(shù)據(jù)在子組件中，擴(kuò)展的結(jié)構(gòu)要在父組件中，這是就要利用slot進(jìn)行子===>父的通信，給數(shù)據(jù)一個(gè)新的作用域，因此叫做作用域插槽。
到此這篇關(guān)于Vue深入理解插槽slot的使用的文章就介紹到這了,更多相關(guān)Vue slot內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在本篇文章里小編給大家整理了一篇關(guān)于vue中4個(gè)自定義指令講解及實(shí)例用法，有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
這篇文章主要介紹了vue element和nuxt的使用技巧分享，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了一篇文章帶你徹底搞懂VUE響應(yīng)式原理，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可任意參考一下,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue-cli-瀏覽器實(shí)現(xiàn)熱更新,最常用的是webpack-dev-server，它是一個(gè)小型的Node.js?Express服務(wù)器，它使用webpack-dev-middleware來(lái)服務(wù)于webpack的包，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友參考下吧2024-03-03
key屬性是一個(gè)特殊的屬性，用于標(biāo)識(shí)每個(gè)節(jié)點(diǎn)的唯一性。在Vue2.x版本中的key和Vue3.x版本中的key有很大的不同，那么在這篇文章中，我們將會(huì)討論Vue2中的key和Vue3中的key的區(qū)別2023-04-04
這篇文章主要介紹了vue全局組件和局部組件的寫(xiě)法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue路由守衛(wèi)及路由守衛(wèi)無(wú)限循環(huán)問(wèn)題詳析
這篇文章主要給大家介紹了關(guān)于vue路由守衛(wèi)及路由守衛(wèi)無(wú)限循環(huán)問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Element el-table的formatter和scope?template不能同時(shí)存在問(wèn)題解決辦法
本文主要介紹了ElementUI?el-table?的?formatter?和?scope?template?不能同時(shí)存在問(wèn)題解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue是構(gòu)建Web界面的JavaScript庫(kù)，原稱(chēng)為Vue.js，它可以通過(guò)簡(jiǎn)潔的API來(lái)提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，本文詳細(xì)介紹了Vue的使用安裝和相關(guān)知識(shí)，有興趣的同學(xué)可以參考借鑒2023-03-03
這篇文章主要介紹了vue中的搜索關(guān)鍵字實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04