vue3 slot 传参

在 Vue 3 中，可以使用 `<slot>` 元素来传递参数给插槽内容。下面是一个示例：

首先，在父组件中定义一个插槽，并传递参数给插槽内容：

<template>
  <div>
    <slot :name="slotName" :age="slotAge"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slotName: 'John',
      slotAge: 25
    }
  }
}
</script>

然后，在子组件中使用插槽，并接收参数：

<template>
  <div>
    <slot v-bind:name="name" v-bind:age="age"></slot>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    },
    age: {
      type: Number,
      default: 0
    }
  }
}
</script>

现在，当父组件使用子组件时，可以通过插槽传递参数：

<template>
  <div>
    <child-component>
      <template v-slot="{ name, age }">
        <p>Name: {{ name }}</p>
        <p>Age: {{ age }}</p>
      </template>
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

这样，子组件就可以接收到父组件传递的参数，并在插槽中使用它们。