Vue 插槽詳解

一、概述

插槽就是子組件中用slot標簽定義的預留位置，可以設置name屬性，也可以不設置name屬性，設置name屬性的叫具名插槽，不設置name屬性的叫不具名插槽，在父組件中使用子組件時候，可以在使用子組件標簽內通過聲明插槽名或不聲明插槽名的方式往子組件中的具名插槽或者不具名插槽寫入html代碼。

插槽使用的關鍵在于：在父組件中使用子組件標簽的時候可以往子組件內寫入html代碼。

二、使用步驟

子組件中定義插槽；

父組件使用子組件時往插槽寫入代碼；

三、何時使用插槽？

簡單的舉個栗子：有2個組件，父組件father，子組件son。

父組件 father

子組件 son

一般我們的組件都會怎么寫，但是這么寫的話，會發現子組件中的實踐slot是顯示不出來的。如果需要讓他顯示出來，這時我們就可以用到插槽slot了。

四、如何使用插槽？

首先，子組件中我們要添加插槽slot，

這時，終于出現了slot。slot的位置就會出現父組件中實踐slot這幾個大字。

可以看到，這里 的slot是沒有名稱的，顧名思義，這是插槽中的不具名插槽。

然后再看看具名插槽，直接上代碼。

父組件

子組件

可以看出，和默認插槽不同的是，在子組件中，我們給插槽一個name屬性，這個就是插槽的名稱，同時在父組件中，我們在需要將內容插入的地方標簽上加了一個slot屬性，他的值就是我們的slot 名稱name。

接下來看下slot-scope。slot-scope是作用域插槽。

官網中有一句特別強調的話：父組件模板的所有內容都會在父級作用域內編譯；子組件模板的所有內容都會在子級作用域內編譯。簡單的說，就是父組件中不能直接用子組件中定義的data數據。而slot-scope的出現就是解決了這樣的問題。

父組件

子組件

其中，下方三個對象的值，我們本身是在子組件中定義的，按照官方文檔中說的，本來父組件中是無法顯示出來這些數據的，但是為什么現在顯示出來了呢？這就要歸功于我們強大的slot-scope了。

首先，在子組件中的插槽上有一句data="list"，而在父組件中也有slot-scope="scope"，slot-scope就是取data的值，slot-scope的值是自定義的，我們可以取任何名稱，但是data的值傳過來時是以對象形式傳輸的，所以在這scope.data才是list的值。

這樣我們就可以在父組件中取到子組件的值，并且加以應用了。

五、拓展閱讀

從vue2.6.0開始，slot、slot-scope已經被廢棄，推薦使用v-slot；有關兩者的用法區別，請移步博文《Vue進階（幺貳捌）：Vue插槽：slot、slot-scope與指令v-slot使用方法區別講解》。

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。