vue3 具名插槽传参

Vue 3 中具名插槽（Named Slots）是一种强大而灵活的功能，它允许我们在组件模板中指定特定名称的插槽位置，以便接收传递的属性或内容。具名插槽可以接收两个类型的参数：

1. **`slot-scope`** 或者 `v-bind_slot`：这是必需的，用于绑定插槽到其对应的插槽实例。在这个表达式中，你可以访问父组件传递给该插槽的数据和方法。

   <template>
     <ParentComponent>
       <slot name="customSlot" slot-scope="{ propValue }">
         <!-- 使用 propValue -->
         <div>{{ propValue }}</div>
       </slot>
     </ParentComponent>
   </template>

   <script>
   import ParentComponent from './ParentComponent.vue';
   export default {
     components: { ParentComponent },
     // 在这里传递参数
     slots: {
       'customSlot': '传递过来的值'
     }
   };
   </script>

2. **`default` 或 `alt` 插槽**: 这是一个默认插槽，如果没有提供其他命名插槽，则会插入到这里。如果同时有 `default` 和具名插槽，只有具名插槽会被使用。

当你在父组件中使用具名插槽，并传递了数据，子组件内的插槽就可以直接使用这些数据，使得组件之间的交互变得更加清晰。