vue3 slot 具名插槽传参数

Vue3 中的具名插槽（named slots）允许你在父组件中定义多个插槽，并给它们起个名字，这样在子组件中引用时可以直接使用这些名字传递参数。这对于自定义组件之间的通信非常有用。

具名插槽的基本语法如下：

<!-- 父组件 -->
<template>
  <my-component>
    <slot name="custom-slot">默认内容</slot> <!-- 定义了一个名为 custom-slot 的插槽 -->
  </my-component>
</template>

<!-- 子组件 -->
<template>
  <div>
    <!-- 可以通过 :slot-name 绑定值到具名插槽上 -->
    <slot :name="customSlotName">插槽内容</slot>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 创建一个响应式的变量存储插槽名称
const customSlotName = ref('default');
</script>

在上述例子中，`my-component` 是一个接受具名插槽的父组件，而它的子组件通过 `:name="customSlotName"` 来绑定自己的插槽名称。当父组件中的 `custom-slot` 名字发生变化时，子组件会根据新的名字显示相应的内容。

相关问题：
1. 如何在 Vue3 中声明具名插槽？
2. 如何在子组件中动态绑定具名插槽并传递参数？
3. 利用具名插槽的优势是什么？