千鋒教育前端Vue3.0全套視頻教程（Kerwin2023版，Vue.js零基礎(chǔ)
p53-具名插槽 心得
1.概念
1.1插槽
- 讓父組件可以向子組件指定位置插入?html?結(jié)構(gòu)，也是一種組件間通信的方式。
- 適用于：?父組件到子組件
1.2具名插槽
- 父組件中：定義?
html?結(jié)構(gòu)，并給不同的插槽?name?命名，這樣可以對應(yīng)的使用多個插槽。 - 子組件中：使用?
<slot>?標(biāo)簽，標(biāo)簽內(nèi)容為默認(rèn)內(nèi)容（即不傳入具體結(jié)構(gòu)時顯示）。里面的?name?對應(yīng)父組件中的定義的值。
2.步驟
2.1 普通插槽的父組件模板和子組件模板
?
053-具名插槽 P53 - 00:01
?
2.2 先在子組件的slot插槽標(biāo)簽上寫name屬性，給插槽取名
?
053-具名插槽 P53 - 01:04
?通過<slot name="xxx"><slot>的方式來定義一個具名插槽
2.3在父組件模板中綁定name屬性值
?
053-具名插槽 P53 - 01:30
?通過<template v-slot:xxx></template>的方式來使用具名插槽
效果如下
?
053-具名插槽 P53 - 02:54
?
2.4 默認(rèn)插槽和具名插槽的混用
?
053-具名插槽 P53 - 04:06
?
?
053-具名插槽 P53 - 04:57
?v-slot也可以簡寫為#
2.5 未來具名插槽的用法
?
053-具名插槽 P53 - 08:02
?
未來在使用具名插槽時，可以在組件庫時自定義導(dǎo)航欄兩側(cè)的內(nèi)容
- 使用插槽，呈現(xiàn)父組件中的內(nèi)容
- 每一個插槽都有特定的名字
2.6 仿照導(dǎo)航欄的展示
?
053-具名插槽 P53 - 09:53
?
中間的template沒有起名，傳入對應(yīng)的默認(rèn)插槽
?
053-具名插槽 P53 - 11:51
?
最后呈現(xiàn)導(dǎo)航欄的效果
?
053-具名插槽 P53 - 13:14
?
標(biāo)簽：
