vue3,使用具名插槽

在Vue 3中，使用具名插槽（Named Slots）是一种更高级、更灵活的方式来处理父子组件间的数据传递和布局复用。具名插槽允许你在父组件模板中通过`<template v-slot:name="props">...</template>`来创建一个命名的插槽区域，并在子组件中通过`<slot :name="slotName">...</slot>`来引用这个插槽。

具名插槽的好处包括：
1. **明确性**：通过名称，你可以清楚地知道子组件希望接收什么样的内容，提高了代码的可读性和维护性。
2. **动态性**：可以根据需要动态更改插槽的内容，比如在不同的状态或条件下提供不同的内容。
3. **组件解耦**：子组件无需关心插入它的父组件的具体结构，只需专注于自身功能即可。

使用具名插槽的一般步骤如下：
1. 父组件定义具名插槽：设置插槽的名称和可能接受的参数。

<template>
  <div>
    <slot name="customSlot" :someProp="parentValue" />
  </div>
</template>

2. 子组件使用插槽：通过`:name`绑定插槽的名称，并传递自定义属性。

<template>
  <slot :name="slotName" :customProp="childValue" />
</template>
<script>
export default {
  //...
  slots: {
    customSlot({ props }) { /* 处理插槽内容 */ }
  }
}
</script>