vue學習指南：第九篇(詳細) - Vue的 Slot-插槽

Slot  v-slot 插槽元素

       瀏覽器在解析時候首先把它看成標籤來解析，只有遇到不認識的就無論了，直接跳過，當你發現是組件，在以組件形式解析。

使用插槽的好處？

好比一個網站 分佈頂部都是同樣的，若是使用組件，要寫好幾個導航組件。我只寫一個導航組件，而後讓插值裏面東西去覆蓋內容 就能夠了。

 

* 在頁面渲染的時候，slot元素會被替換成組件標籤裏面的東西。那這個slot就是哈哈哈。

* 不只能夠直接寫內容，還能夠套標籤。還能夠寫其它組件。

 

1. 編譯做用域 在誰的模板下，組件標籤中的數據就是誰的。

<p>{{ name }}</p>   它在實例的模板下，因此是 李四

子組件：                                           父組件：

                  

 

2. 默認內容，組件標籤中若是沒有內容，在組件模板下<slot></slot>中的內容就是默認內容，若是在組件標籤上寫了內容，就不去渲染 slot裏面的內容

<myhead></myhead>

<slot>哈哈哈哈我好帥</slot> 默認內容

　　

3. 具名插槽

1. 爲何叫 具名插槽，就是說明有不少 slot ，每一個 slot都有本身的名字。

2. slot 元素有個特殊的特性  ：name。這個特性能夠用來定義額外的插槽

 

4. 插槽做用域：slot(插槽)在組件模板中，使用數據是當前組件的數據，組件標籤在父組件的模板中調用，裏面使用的數據是父組件的。

1. 有時候讓插槽裏面的內容可以訪問子組件裏的數據是頗有用的。

2. 在組件標籤中 我想使用子組件的 name 但這個name是實例對象的父組件的，由於組件標籤在實例對象模板中。

3。 爲了讓 user 在父級的插槽使用，咱們將 user 做爲<slot>插槽元素的一個特性綁定上去。

4. 咱們能夠給 v-slot 帶一個值，來定義咱們提供的插槽 prop。

 

需求：組件標籤（父組件）使用本身（子組件）組件中的數據？

1. 將子組件的數據綁定到插槽標籤 <slot>上

 

 

綁定在 slot 的 u 都存在插槽裏的叫 prop 對象，要用 v-slot=「yh」 定義一個 prop對象，這個，yh就是定義 prop對象，而這個對象上存的就是子組件的數據。

綁定在 slot 上的屬性，會造成一個 prop對象，用 v-slot 來定義這個prop對象。

2. 在組件標籤上用 v-slot = 「users」 users 就是這個 prop對象了。

{{ users.u }}  就是 user 對應的 「張三」 數據

 

插槽注意點：

* 能夠打亂順序，給名字對應上就能夠

* 組件標籤裏面的 v-slot:xx，後面綁定的名稱要和模板裏的對應。

* 若是不寫 v-slot就不出

 

做者：晉飛翔

 

手機號(微信同步)：17812718961

 

但願本篇文章 能給正在學習 前端的朋友 或 以及工做的朋友 帶來收穫 不喜勿噴 若有建議 多多提議 謝謝！