默認插槽

父組件

        <Sidebar><div>{{ strData }}</div></Sidebar>
let strData = ref('我是你爸爸真偉大，養你這么大');//定義插槽數據

子組件

 <slot>沒有數據，我先默認顯示一下 loading。。。。。。。</slot>

父組件提供的內容會覆蓋子組件的默認內容。
若父組件未提供具名插槽內容，子組件的默認內容將被渲染。

具名插槽

子組件

        <slot name="title"></slot><slot name="strslot">沒有數據，我先默認顯示一下 loading。。。。。。。</slot>//給插槽取兩個名字 title strslot

父組件

        <Sidebar><template v-slot:title><span>{{title}}</span></template><template v-slot:strsolt><div>{{ strData }}</div></template></Sidebar>//簡寫<Sidebar><template #title><span>{{title}}</span></template><template #strslot><div>{{ strData }}</div></template></Sidebar>
let strData = ref('我是你爸爸真偉大，養你這么大');//定義插槽數據
let title = ref('我是slot的標題');

簡寫：
#header 等價于 v-slot:header。# 縮寫只能在 標簽上使用，若直接在組件上使用 v-slot，則不能使用縮寫。
通過 name 屬性指定插槽名稱。
將子組件已經取好的插槽名在父組件
使組件結構更靈活，適用于多種場景。
語法：
子組件用 定義，父組件用 <template #xxx> 使用。
作用：
允許父組件將內容精確分發到子組件的不同位置。
適用場景：
布局組件、模態框、表格等需要靈活內容結構的組件。

通過具名插槽，組件可以更靈活地復用，同時保持清晰的結構和數據流向。

作用域插槽

子組件

        <slot name="title"></slot><slot name="strslot" :childData="sendData">沒有數據，我先默認顯示一下 loading。。。。。。。</slot>//script
let sendData = ref('這是兒子給父親最后的一點溫柔了');

父組件

        <Sidebar><template #title><div>{{ title }}</div></template><template #strslot="{ childData }"><div>{{ strData }}</div><span>{{ childData }}</span></template></Sidebar>

作用：
允許子組件向父組件傳遞數據，使父組件能夠動態自定義子組件的渲染內容。
突破數據單向流動限制：子組件可向父組件回傳數據，父組件基于這些數據自定義渲染邏輯。
增強組件復用性：子組件提供 “渲染接口”，父組件通過插槽自定義具體實現。
數據來源：
子組件向父組件傳遞動態數據
靈活性：
高（內容可根據子組件數據變化）
語法：
傳遞數據

<!-- 完整語法 -->
<template v-slot:item="{ item }">...</template><!-- 縮寫語法 -->
<template #item="{ item }">...</template>

適用場景：
列表 / 表格組件、通用布局組件、需要動態內容的組件。
默認插槽對比：
普通插槽內容由父組件靜態定義，作用域插槽內容動態依賴子組件數據。