Vue深入理解插槽slot的使用
一、插槽(slot)是什麼
slot是組件內的一個占位符,該占位符可以在後期使用自己的標記語言填充。
作用:讓父組件可以向子組件指定位置插入html結構,也是一種組件間通信方式,適用於父組件===>子組件
例子:
//父組件中 <Category> <div>html結構</div> </Category> //子組件中: <template> <div> <slot>插槽的默認內容</slot> </div> </template>
二、使用場景
- 通過插槽可以讓用戶拓展組件,去更好地復用組件和對其做定制化處理;
- 如果父組件在使用到一個復用組件的時候,這個組件在不同的地方有少量的更改,如果去重寫組件是很浪費,這時,通過slot插槽向組件內部指定位置傳遞內容,完成這個復用組件在不同場景的應用。
- 比如:佈局組件、表格列、下拉選項、彈框顯示內容等。
三、slot的分類
默認插槽
子組件用<slot>
來標記渲染的位置,在父組件的自定義標簽中寫slot中的結構。如果在子組件的<slot>
中寫瞭結構,那麼會作為默認顯示的內容。
//父組件(數據在父組件中) <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}}分類</h3> <slot>默認顯示內容</slot> </div> </template>
效果:
具名插槽
為每個slot標記名字,也是處理具有多個插槽時的對應關系,標記名字的方法有兩個:
方法1:
//父組件 <Category title="美食"> <ul slot="foods"> <li v-for="(item,key) in foods" :key="key">{{item}}</li> </ul> </Category> //子組件 <h3>{{title}}分類</h3> <slot name="foods">默認顯示內容</slot> /*給插槽取名*/
方法2:此時必須標記在template標簽上
<template v-slot:foods> <ul> <li v-for="(item,key) in foods" :key="key">{{item}}</li> </ul> </template>
作用域插槽
當元素在子組件中時,想實現上述操作,就會造成數據獲取不到的問題,這時就可以使用作用域插槽,作用域這三個字就體現在數據的作用域上。
//父組件 <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> //子組件:數據在子組件中 <template> <div class="category"> <h3>{{ title }}分類</h3> <slot :foods="foods">默認顯示內容</slot> </div> </template>
可以通過解構獲得slot-scope={foods},還可以重命名slot-scope={new:foods}
四、介紹對slot的理解
回答:slot就是插槽,主要的作用就是拓展組件,在重復使用一個組件的時候可以通過少量的修改就達到復用的效果。分成默認插槽、具名插槽和作用域插槽。其中前兩個都是元素在父組件中,拓展的結構也在父組件中,直接在子組件中占位,在父組件中添加結構即可,區別就是具名插槽給插槽取瞭名字,多個插槽存在時可以一一對應。而作用域插槽的數據在子組件中,擴展的結構要在父組件中,這是就要利用slot進行子===>父的通信,給數據一個新的作用域,因此叫做作用域插槽。
到此這篇關於Vue深入理解插槽slot的使用的文章就介紹到這瞭,更多相關Vue slot內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 解決父子組件通信的三種Vue插槽
- JavaScript–在Vue中使用插槽:slot
- vue默認插槽的理解與實例代碼
- vue中的slot-scope及scope.row用法
- 淺談Vue中插槽slot的使用方法