Vue2封装Vuetify组件：为何插槽简写写法无法生效？

你的简写写法无效的核心原因是：Vue2不支持#[name]这种动态插槽名的简写语法，这个语法是Vue3才引入的新特性。

具体细节： #

• Vue2中，动态命名普通插槽的正确写法只能是：

  • 旧语法：<template :slot="name">（也就是你第一种写法里的方式）
  • 新语法（Vue2.6+支持）：<template v-slot:[name]>
    而#[name]是Vue3对v-slot:[name]的简写语法，Vue2的模板编译器无法识别，自然不会生效。

• 对于作用域插槽，Vue2.6+支持的动态写法是<template v-slot:[name]="data">，同样不支持#[name]="data"这种Vue3的简写形式，你看到的别人的写法大概率是在Vue3项目中使用的。

适配Vue2的正确写法（基于你原代码调整） #

<template>
  <v-text-field
    v-bind="computedAttrs"
    v-on="$listeners"
  >
    <!-- 遍历普通插槽（Vue2.6+写法） -->
    <template
      v-for="(_, name) in $slots"
      v-slot:[name]
    >
      <slot :name="name"></slot>
    </template>

    <!-- 遍历作用域插槽（Vue2.6+写法） -->
    <template
      v-for="(_, name) in $scopedSlots"
      v-slot:[name]="data"
    >
      <slot
        :name="name"
        v-bind="data"
      ></slot>
    </template>

  </v-text-field>
</template>

如果你的Vue2版本低于2.6，那只能用旧的slot属性写法，也就是你最初的代码形式。

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