## 一、概述 插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質和更大的重用性。 假如父組件需要在子組件內放一些DOM，那么這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。 >[danger] 插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪里顯示就由子組件來進行控制； ## 二、插槽分類 插槽的分類： * **默認插槽**`default` * **具名插槽**`name` * **作用域插槽**`v-slot` ~~~html // Child.vue <template> <div> <main> <!-- 默認插槽 --> <slot> <!-- slot內為后備內容 --> <h3>沒傳內容</h3> </slot> </main> <!-- 具名插槽 --> <header> <slot name="header"> <h3>沒傳header插槽</h3> </slot> </header> <!-- 作用域插槽 --> <footer> <slot name="footer" testProps="子組件的值"> <h3>沒傳footer插槽</h3> </slot> <footer> </div> </template> ~~~ ~~~html //Parent.vue <template> <child> <!--默認插槽--> <template v-slot> // v-slot:default <div>默認插槽</div> </template> <!--具名插槽--> <template #header> // v-slot:header <div>具名插槽</div> </template> <!--作用域插槽--> <template #footer="slotProps"> //v-slot:footer <div> {{slotProps.testProps}} </div> </template> <child> </template> ~~~ ## 三、簡單實例 父： ```html <template> <div> 我是父組件 <slotOne1> <p style="color:red">我是父組件插槽內容</p> </slotOne1> </div> </template> ``` 子： ```html <template> <div class="slotOne1"> <div>我是slotOne1組件</div> <slot></slot> </div> </template> ``` 效果示意圖：