????插槽為組件提供了強大的擴展能力。我們可以把電腦的主板理解為一個已經封裝好的組件，主板上都會預留各種插槽，我們可以往插槽中插入內存條、顯卡、聲卡等設備。基于同樣的思想，Vue在封裝組件時，也可以預留插槽，在組件被使用的時候，我們就可以往組件插槽中插上其他內容。

??? Vue中的插槽用 slot 標簽進行占位。這一塊我們會講兩部分內容：插槽和作用域插槽。

????插槽可理解為，父模板中向子組件內部傳遞內容。作用域插槽則是，父模板中獲取子組件中的數據，組裝好內容之后再傳遞給子組件。下面我們分別詳細介紹。

一、插槽

前面說了，插槽是使用 slot 標簽在組件中放置占位符。我們定義一個帶插槽的組件。

Vue.component('alert-box', { template: ` ??????Error! `})

組件模板?template?中的??就是我們為?alert-box?組件預留的插槽。alert-box?組件在使用的時候，我們就能往插槽中傳遞內容。

比如我們傳遞一段文本

Something bad happened.

就會被渲染如下

如果我們傳遞一個按鈕

緊急事件

按鈕就會被渲染出來

我們也可以傳入一堆HTML內容，這些HTML內容都會渲染到?slot?所在的位置。

緊急通知

請同學們趕緊撤離

校長辦公室

渲染如下

通過上面這個例子，應該大致明白了插槽的作用。

????為了方便使用，Vue提供了給插槽設置默認內容的功能。如果外部不傳入內容，則展示默認內容。如果外部傳入內容，則展示傳入的內容。

Vue.component('alert-box', { template: ` Error! Something bad happened. `})

默認內容是放在??中間，上面我們就是在??中間放置了一段文本?Something bad happened.?。在使用的時候，如果不傳入內容，默認就顯示這段文本。

緊急撤離

就會被渲染成

????上面我們沒有給插槽指定名字，實際上Vue會給沒有起名字的插槽自動加上一個?default?的名字，等同于

????我們也可以為插槽指定其它名字，以方便外部在傳入內容的時候，可以指定將內容傳遞給哪個插槽。這樣就更接近電腦主板的思想了，主板上的插槽是分內存條插槽、顯卡插槽、聲卡插槽?等等，每一個插槽都是有名字的。

????我們的組件插槽也可以這樣，比如下面代碼中我們就指定了頭部插槽、尾部插槽。

Vue.component('base-layout', { template: ` `})

????這時候在使用的時候，就需要指定內容究竟是傳遞給哪個插槽，未指定的都會傳遞給匿名插槽，也就是?default?插槽。

Here might be a page title

A paragraph for the main content.

And another one.

Here's some contact info

????如果組件內有多個匿名插槽，那就會傳遞多份。如果組件內沒有匿名插槽，未指定插槽名的內容就會被丟棄。

????不過，slot 屬性在Vue 2.6.0版本中已經不推薦使用，官方推薦用 v-slot 指令來替代 slot 。v-slot 指令更強大，它不僅可以在這里替代 slot ，還可以替代作用域插槽中的 slot-scope。

????我們使用 v-slot 指令改造一下上面的用法。我們通過在一個??元素上使用 v-slot 指令，并以 v-slot 的參數的形式提供其名稱，來向具名插槽傳遞內容。

Here might be a page title

A paragraph for the main content.

And another one.

Here's some contact info

????這兩種使用的效果是一樣的。不過我們推薦使用新語法 v-slot 指令。

二、作用域插槽

????在學習作用域插槽之前，我們先要明白作用域插槽到底解決了什么問題。

????很多時候我們會有這樣的需求，需要把子組件中的數據通過父級模板的控制，從而在子組件中渲染出不同的樣子。這句話不太好理解，舉個具體的例子。

????子組件的數據中有一數組

letters = ['A', 'B', 'C', 'D', 'E']

我們在某處需要把這個數組渲染成：A - B - C - D - E，而在另一處又需要渲染成列表：

• A

• B

• C

• D

• E

????這時候就可以通過作用域插槽來實現。作用域插槽就是數據由子組件提供，排版由父組件控制。

????在介紹作用域插槽之前，先要介紹一下編譯作用域。因為正是編譯作用域的存在，才使得作用域插槽有存在的必要。

2.1 編譯作用域

????編譯作用域，簡單的說就是父子組件都只能取到自己實例中的數據。官方也給出了描述：父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的。

????我們通過一個具體的例子來說明其含義

{{msg}} let vm = new Vue({ el: '#app', components: { com: { template: ` data() { return { msg: '子組件' } } } }, data: { msg: '父組件' } })

????父子組件中在各自的 data 中都定義了msg，并且他們值不一樣。那子組件在使用的時候

{{msg}}

插值表達式?{{msg}}?到底取到的是誰的數據？很方便可以驗證出?{{msg}}?取到的是父組件的數據。其實在父級模板中是無法直接取到子組件中的數據。這正是因為有編譯作用域的存在。同理，在子組件中，也不能直接使用父組件中的數據。當然父子組件中的數據并不是絕對隔離，我們可以通過傳值的方式，讓他們數據進行交互。

作用域插槽就是要解決在父級模板中取到子組件中數據的問題。

2.2 作用域插槽

????現在目標已經明確，我們就是要在父級模板中取到子組件中的數據，所以這里勢必要進行數據傳遞。

????先考慮子組件的數據傳出，我們可以給 slot 標簽設置一個自定義屬性?data，然后將數據綁定到自定義屬性?data?上，即可將數據傳出。

然后在父級模板中接收數據。Vue是通過在 上使用特殊的 slot-scope屬性，接收子組件設置在插槽 slot 上的全部自定義屬性。

scope?變量就會接收到設置在?slot?上的全部自定義屬性，然后我們通過點屬性名的方式，就可以取到綁定在屬性上面的值。

{{scope.data}}

????現在我們來實現前面說的字符數組的渲染。在Vue實例中創建子組件com如下

let vm = new Vue({ el: '#app', components: { com: { template: ` `, data() { return { letters: ['A', 'B', 'C', 'D', 'E'] } } } }, })

可以把它渲染成列表

{{item}}

也可以渲染成短橫線連接的形式

{{scope.data.join(' - ')}}

我們就可以看到相同的數據展示成不同的形式。

????現在我們再完善一下作用域插槽的定義：子組件向父組件傳遞數據，但父組件通過傳遞插槽內容來控制數據在子組件中展現方式。

????前面說了，slot-scope在 Vue 2.6.0中不再推薦使用，應該使用 v-slot 指令來替代，上面渲染的代碼就可以改造如下

{{item}} {{scope.data.join(' - ')}}

總結

????本章我們主要介紹了插槽和作用域插槽。插槽部分講了插槽的使用、插槽默認值、具名插槽。作用域插槽部分主要講了編譯作用域和作用域插槽的使用。

????這一塊內容是Vue中的高級部分，運用恰當，威力極大。

總結

以上是生活随笔為你收集整理的vue设置标签自定义属性_Vue组件化开发之插槽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。