Vue2 与 Vue3 的插槽（默认插槽、具名插槽、作用域插槽、具名插槽 + 作用域插槽）

Vue2 插槽

1、默认插槽

<!-- 子组件 --><template><div><slot>默认内容</slot></div>
</template>

<!-- 父组件，使用子组件 --><child><div>新的内容<div>
</child>

2、具名插槽

1. 使用 slot="【name】" 的具名插槽（已废弃）

<!-- 子组件 --><template><div><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>
</template>

<!-- 父组件，使用子组件 --><child><template slot="header"><h1>标题</h1></template><div>默认内容</div><template slot="footer"><p>页脚</p></template>
</child>

2. 使用 v-slot:【name】 的具名插槽（推荐使用）

<!-- 子组件 --><template><div><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>
</template>

<!-- 父组件，使用子组件 --><child><template v-slot:header><h1>标题</h1></template><div>默认内容</div><template v-slot:footer><p>页脚</p></template>
</child>

3、作用域插槽

1. 使用 scope="【data】" 的作用域插槽（已废弃）

<!-- 子组件 --><template><ul><li v-for="item in items" :key="item.id"><slot :item="item"></slot></li></ul>
</template>

<!-- 父组件，使用子组件 --><child><template scope="props"><span>{{ props.item.name }}</span></template>
</child>

<!-- 解构赋值 --><child><template scope="{ item }"><span>{{ item.name }}</span></template>
</child>

2. 使用 slot-scope:"【data】" 的作用域插槽（推荐使用）

<!-- 子组件 --><template><ul><li v-for="item in items" :key="item.id"><slot :item="item"></slot></li></ul>
</template>

<!-- 父组件，使用子组件 --><child><template slot-scope="props"><span>{{ props.item.name }}</span></template>
</child>

<!-- 解构赋值 --><child><template slot-scope="{ item }"><span>{{ item.name }}</span></template>
</child>

4、具名插槽 + 作用域插槽

• 使用 v-slot:【name】="【data】"

<!-- 子组件 --><template><ul><li v-for="item in items" :key="item.id"><slot name="header" :item="item"></slot><slot name="footer" :item="item"></slot></li></ul>
</template>

<!-- 父组件，使用子组件 --><child><template v-slot:header="props"><h3>{{ props.item.name }}（头部）</h3></template><template v-slot:footer="props"><p>{{ props.item.description }}（底部）</p></template>
</child>

<!-- 解构赋值 --><child><template v-slot:header="{ item }"><h3>{{ item.name }}（头部）</h3></template><template v-slot:footer="{ item }"><p>{{ item.description }}（底部）</p></template>
</child>

---

Vue3 插槽

1、默认插槽

<!-- 子组件 --><template><div><div>this is child</div><slot></slot></div>
</template>

<!-- 父组件，使用子组件 --><Child><div>123</div>
</Child>

2、具名插槽

1. 使用 v-slot:【name】 的具名插槽

<!-- 子组件 --><template><div><div>this is child</div><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>

<!-- 父组件，使用子组件 --><Child><template v-slot:header><h1>页面标题</h1></template><div>主要内容区域</div><template v-slot:footer><p>版权信息</p></template>
</Child>

2. 使用 #【name】 的具名插槽（简写）

<!-- 子组件 --><template><div><div>this is child</div><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>

<Child><template #header><h1>页面标题</h1></template><div>主要内容区域</div><template #footer><p>版权信息</p></template>
</Child>

3、作用域插槽

1. 使用 v-slot="【data】" 的作用域插槽

<!-- 子组件 --><template><div><div>this is child</div><slot :item="item"></slot></div>
</template>

<!-- 父组件，使用子组件 --><Child><template v-slot="props"><span>{{ props.item.name }}</span></template>
</Child>

<!-- 解构赋值 --><Child><template v-slot="{ item }"><span>{{ item.name }}</span></template>
</Child>

2. 使用 #="【data】" 的作用域插槽（简写）

<!-- 子组件 --><template><div><div>this is child</div><slot :item="item"></slot></div>
</template>

<!-- 父组件，使用子组件 --><Child><template #="props"><span>{{ props.item.name }}</span></template>
</Child>

<!-- 解构赋值 --><Child><template #="{ item }"><span>{{ item.name }}</span></template>
</Child>

4、具名插槽 + 作用域插槽

1. 使用 v-slot:【name】="【data】"

<!-- 子组件 --><template><div><div>this is child</div><header><slot name="header" :item="item"></slot></header><footer><slot name="footer" :item="item"></slot></footer></div>
</template>

<!-- 父组件，使用子组件 --><Child><template v-slot:header="props"><span>{{ props.item.name }}（头部）</span></template><template v-slot:footer="props"><span>{{ props.item.name }}（底部）</span></template>
</Child>

<!-- 解构赋值 --><Child><template v-slot:header="{ item }"><span>{{ item.name }}（头部）</span></template><template v-slot:footer="{ item }"><span>{{ item.name }}（底部）</span></template>
</Child>

2. 使用 #【name】="【data】"

<!-- 子组件 --><template><div><div>this is child</div><header><slot name="header" :item="item"></slot></header><footer><slot name="footer" :item="item"></slot></footer></div>
</template>

<!-- 父组件，使用子组件 --><Child><template #header="props"><span>{{ props.item.name }}（头部）</span></template><template #footer="props"><span>{{ props.item.name }}（底部）</span></template>
</Child>

<!-- 解构赋值 --><Child><template #header="{ item }"><span>{{ item.name }}（头部）</span></template><template #footer="{ item }"><span>{{ item.name }}（底部）</span></template>
</Child>