vue的插槽原來該這樣理解
一、認識插槽Slot
前面我們會通過props傳遞給組件一些數據，讓組件來進行展示，但是為瞭讓這個組件具備更強的通用性，我們不能將組件中的內容限制為固定的div、span等等這些元素，比如某種情況下我們使用組件，希望組件顯示的是一個按鈕，某種情況下我們使用組件希望顯示的是一張圖片，我們應該讓使用者可以決定某一塊區域到底存放什麼內容和元素。所以有瞭插槽的存在，我們可以提高組件的復用性，並且也提高組件的靈活性。
二、插槽的基本使用
直接在其中使用<slot></slot>
三、插槽的默認內容
如果想要設置插槽的默認內容，可以直接在<slot></slot>標簽內添加內容。
四、多個插槽實現的效果
如上圖所示，如果在組件之間設置多個標簽，則會在該組件的每一個插槽中都添加多個標簽。
如上面代碼所示：在組件中的每一個<slot></slot>中使用name屬性設置插槽名，並且組件中間使用template標簽並且設置v-slot:屬性名來進行一一對應。
五、動態插槽
有時候我們的插槽名稱不固定，需要從外界傳入，這是就需要使用動態插槽。
如上圖所示，我們在<slot></slot>中動態綁定屬性名，該屬性為通過props傳入的，我們在外部，通過v-slot:[na]來動態綁定屬性。
六、具名插槽的縮寫
如上圖所示，具名插槽的v-slot:left可以縮寫為#left。
七、渲染作用域
父級模板的所有內容在父級模板中編譯。 子級模板的所有內容在子集模板中進行編譯。
如圖所示，父組件中存在title,子組件中也存在title,但是最終顯示的是父組件的title屬性。
八、作用域插槽的案例
這裡在父組件中的data中設置數組數據，並將其通過props傳遞給組件內部，子組件拿到數組後，通過for循環遍歷數組中的每一項內容，並且將數據通過v-bind綁定到slot標簽上，然後在父組件可以通過v-slot:default="data",這個data變量就是數據。
九、獨占默認插槽縮寫
上面是作用域插槽的完整寫法
下面可以將其改寫為：
也可以改寫為:
十、默認插槽和具名的混合
作用域插槽案例可以改寫為：
總結
本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀：
- Vue中插槽Slot基本使用與具名插槽詳解
- vue如何使用vue slot封裝公共組件
- vue中插槽整理及用法分析
- Slots Emit和Props穿透組件封裝實現摸魚加鐘
- JavaScript–在Vue中使用插槽:slot