Vue 3：插槽属性——能否通过插槽传递数据（如href）？

可以通过插槽传递属性，并将这些属性绑定到组件内部的目标元素上。比如你提到的创建名为button的命名插槽、传递href属性并绑定到<a>标签的需求，完全可以实现。

组件实现（MyComponent.vue） #

<template>
  <div>
    <!-- 将heading插槽的属性绑定到h2标签 -->
    <h2 class="text-lg" v-bind="$slots['heading'].attrs">
      <slot name="heading" />
    </h2>
    <!-- 将button插槽的属性绑定到a标签 -->
    <a class="btn" v-bind="$slots['button'].attrs">
      <slot name="button" />
    </a>
  </div>
</template>

页面使用组件（MyPage.vue） #

注意：原示例中#header应为#heading，需与组件内的插槽名称对应，否则属性无法正确绑定：

<template>
  <MyComponent>
    <template #heading class="font-bold">
      这是我的标题
    </template>
    <template #button href="/about" class="bg-primary">
      关于我们
    </template>
  </MyComponent>
</template>

最终渲染的HTML #

<div>
    <h2 class="text-lg font-bold">
      这是我的标题
    </h2>
    <a class="btn bg-primary" href="/about">
      关于我们
    </a>
</div>

实现原理 #

• 父组件中给<template>插槽标签添加的属性（如class、href）会被收集到插槽的attrs对象中。
• 在子组件内，通过$slots['插槽名称'].attrs获取这些属性，再用v-bind一次性绑定到目标元素上，就能实现属性的传递与复用。

内容的提问来源于stack exchange，提问作者Shareef Hadid