我們知道在Vue中 Child 組件的標(biāo)簽 的中間是不可以包著什么的 。

可是往往在很多時(shí)候我們?cè)谑褂媒M件的時(shí)候總想在組件間外面自定義一些標(biāo)簽，vue新增了一種插槽機(jī)制，叫做作用域插槽。要求的版本是2.1.0+；

插槽，其實(shí)就相當(dāng)于占位符。它在組件中給你的HTML模板占了一個(gè)位置，讓你來傳入一些東西。插槽又分為 匿名插槽、具名插槽、作用域插槽。

在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope

匿名插槽，我們也可以叫它單個(gè)插槽或者默認(rèn)插槽。和具名插槽相對(duì)，它是不需要設(shè)置 name 屬性的，它隱藏的name屬性為default。

father.vue

child.vue

匿名插槽，name的屬性對(duì)應(yīng)的是 default 也可以不寫就是默認(rèn)的意思啦；

在使用的時(shí)候還有一個(gè)問題要注意的 如果是有2個(gè)以上的匿名插槽是會(huì)child標(biāo)簽里面的內(nèi)容全部都替換到每個(gè)slot；

顧名思義就是slot 是帶有name的 ，定義： 或者使用簡(jiǎn)單縮寫的定義 #header 使用：要用一個(gè) template標(biāo)簽包裹

father.vue

child.vue

這里說一下多個(gè)具名插槽的使用 多個(gè)具名插槽，插槽的位置不是使用插槽的位置而定的，是在定義的時(shí)候的位置來替換的

father.vue

child.vue

就是用來傳遞數(shù)據(jù)的插槽

當(dāng)你想在一個(gè)插槽中使用數(shù)據(jù)時(shí)，要注意一個(gè)問題作用域的問題，Vue 官方文檔中說了父級(jí)模板里的所有內(nèi)容都是在父級(jí)作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的;

為了讓 子組件中的數(shù)據(jù) 在父級(jí)的插槽 內(nèi)容中可用我們可以將 數(shù)據(jù) 作為 元素的一個(gè)特性綁定上去： v-bind:text='text'

注意：

匿名的作用域插槽和具名的作用域插槽 區(qū)別在v-slot:defult='接受的名稱'(defult(匿名的可以不寫，具名的相反要寫的是對(duì)應(yīng)的name))

v-solt可以解構(gòu)接收 解構(gòu)接收的字段要和傳的字段一樣才可以 例如 :one 對(duì)應(yīng) v-slot='{one}'

效果圖

到此這篇關(guān)于Vue中插槽slot的使用方法與應(yīng)用場(chǎng)景的文章就介紹到這了,更多相關(guān)Vue插槽slot用法內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！