vue3 中slot怎样传参数

在Vue 3中，`slot`是用来在组件模板中插入内容的地方，它允许你将内容传递给子组件，就像局部组件一样。如果你想通过`slot`传递参数，你可以这样做：

1. **具名插槽（Named Slots）**:
使用 `v-slot` 或者 `slot` 标签，并给它一个名字（如 `default`、`header` 等），然后在父组件模板里引用这个插槽并传递数据，例如：

   <template>
     <my-component>
       <template v-slot:my-slot="props">
         <!-- 这里的 props 就是你传递的数据 -->
         <p>Props data: {{ props.message }}</p>
       </template>
       <button @click="passDataToSlot">Pass Data</button>
     </my-component>
   </template>

   <script>
   import MyComponent from './MyComponent.vue';

   export default {
     components: { MyComponent },
     methods: {
       passDataToSlot() {
         this.$slots.my-slot = { message: 'Hello from parent!' };
       }
     }
   };
   </script>

2. **作用域插槽（Scoped Slots）**:
如果需要在子组件内部处理传递的参数，可以使用作用域插槽。子组件会有一个 `scopedSlots` 对象，你可以在这个对象上设置插槽名称，然后在父组件通过属性传递值：

   <!-- 子组件 MyChild.vue -->
   <template>
     <div>
       <slot v-bind:item="item" />
     </div>
   </template>
   
   <script>
   export default {
     props: ['item']
   };
   </script>

父组件调用时：

   <my-child>
     <template #mySlot="props">
       <span>{{ props.item.text }}</span>
     </template>
   </my-child>