插槽在vue組件通信中主要有三種類型默認插槽用于單一內容插入具名插槽用于多個區域自定義作用域插槽讓父組件基于子組件數據渲染內容。1.默認插槽是最基礎的方式適合只需要插入一段內容的情況可在slot標簽內添加默認內容以備父組件未傳入時顯示；2.具名插槽通過name屬性區分多個插槽適合結構清晰需要多處定制的組件如布局或表單組件父組件通過template配合#符號指定對應名稱插槽；3.作用域插槽可將子組件數據暴露給父組件常用于封裝可復用列表或表格組件子組件通過綁定屬性傳遞數據父組件使用解構方式獲取并渲染內容。
插槽（slot）是 vue 組件通信中非常實用的一個特性，它允許我們向子組件傳遞內容，包括 html、組件甚至函數。常見的使用方式其實不多，但用好了能大大提升組件的靈活性。
默認插槽：最基礎也是最常用的
默認插槽就是你在寫組件時最常遇到的那種，比如這樣：
<my-component> <p>這是一段插入的內容</p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p> </my-component>
在 my-component 內部只需要寫一個
不過需要注意的一點是：如果父組件沒有傳內容進來，那這個 slot 的位置就是空的。你可以加個默認內容，像這樣：
<slot> <p>默認內容</p> </slot>
這樣當父組件沒傳內容時，就會顯示默認的那一段。
具名插槽：給插槽起個名字更好管理
當組件需要多個插槽的時候，默認插槽就不夠用了。這時候就需要用到具名插槽（named slot）。
比如你寫了一個卡片組件，想讓標題、內容、底部按鈕分別由父組件控制，這時候就可以這樣定義：
<!-- 子組件 --> <slot name="header"></slot> <slot name="default"></slot> <slot name="footer"></slot>
然后在父組件里這樣使用：
<my-card> <template #header> <h1>這里是標題</h1> </template> <p>這是主要內容</p> <template #footer> <button>提交</button> </template> </my-card>
這里的 #header 和 #footer 就對應了具名插槽的名字，而中間那段
標簽會自動放到 name=”default” 的那個 slot 里。
這種方式特別適合結構清晰、需要多處定制的組件，比如布局組件、表單組件等。
作用域插槽：把子組件數據暴露給父組件
有時候我們希望父組件在使用插槽的時候能訪問到子組件的數據，這時候就要用到作用域插槽（scoped slot）。
舉個例子，子組件內部有一個列表項數組，你想讓父組件決定怎么渲染每個 item，但又不想暴露整個子組件邏輯。
子組件可以這樣寫：
<slot v-for="item in items" :item="item"></slot>
然后父組件這樣使用：
<my-list> <template #default="{ item }"> <li>{{ item.label }}</li> </template> </my-list>
這里的關鍵在于子組件通過 :item=”item” 把數據綁定到了 slot 上，父組件則通過解構的方式拿到這個數據。這種模式在封裝可復用列表、表格等組件時非常有用。
也可以結合 v-slot 指令來寫更復雜的邏輯，比如傳多個變量或者函數進去，實現更靈活的交互。
總結一下幾種常見方式：
- 默認插槽：適用于單一內容插入
- 具名插槽：用于組件多個區域需要自定義
- 作用域插槽：讓父組件能基于子組件數據來渲染內容
基本上就這些，不復雜但容易忽略細節，比如默認值、作用域傳遞方式這些，剛開始用的時候可能會踩坑。
