使用mixins扩展Vuetify VAutocomplete时props未正常传递问题

实现逻辑存在两处冲突，导致属性传递失效：

• 同时混用mixins继承VAutocomplete、模板内重复渲染独立VAutocomplete实例两种封装方式，逻辑互斥
• 未在当前组件显式声明对应props，直接使用v-bind="$props"无法获取父组件传入的items等未声明属性，绑定为空
• 混入VAutocomplete后自定义模板会覆盖组件原生渲染逻辑，没有做属性、事件的完整透传

二选一即可，禁止混用两种封装逻辑。

方案1：属性透传封装（优先推荐，实现成本最低） #

不需要混入/继承VAutocomplete，直接做属性、事件的透传，适合只需要加自定义样式、少量自定义逻辑的开箱即用组件场景，代码如下：

<template>
  <span>
    <p
      class="text-left text-secondary text-caption ml-2 pb-0 pt-0 mb-0 mt-0"
      v-if="label"
    >
      {{ label }}
    </p>
    <v-autocomplete
      :class="getClass"
      outlined
      single-line
      hide-details
      v-bind="$attrs"
      v-on="$listeners"
    >
      <!-- 透传所有插槽 -->
      <template v-for="(_, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>
    </v-autocomplete>
  </span>
</template>

<script>
import { VAutocomplete } from "vuetify/lib";

export default {
  name: "CustomAutocomplete",
  props: {
    // 仅声明当前组件自定义使用的属性
    label: {
      type: String,
      default: ""
    }
  },
  // 禁止未声明属性自动绑定到根span节点
  inheritAttrs: false,
  computed: {
    getClass() {
      return "input-style font-size-input text-light-input placeholder-light border-radius-md select-style mt-0 mb-2";
    }
  }
};
</script>

关键配置说明：

• 移除mixins: [VAutocomplete]配置，避免逻辑冲突
• 替换v-bind="$props"为v-bind="$attrs"，父组件传入的items、value等未在当前组件声明的属性，都会自动通过$attrs绑定到内部VAutocomplete实例
• 增加v-on="$listeners"透传所有事件绑定，v-for遍历$slots透传所有插槽，保证组件原生功能完全可用
• 配置inheritAttrs: false，避免多余属性污染根节点

方案2：继承式封装（适合深度定制组件逻辑场景） #

如果需要改写VAutocomplete内置逻辑，可以用extends继承组件，手动合并声明props，不要重复渲染独立VAutocomplete实例：

<template>
  <span>
    <p
      class="text-left text-secondary text-caption ml-2 pb-0 pt-0 mb-0 mt-0"
      v-if="label"
    >
      {{ label }}
    </p>
    <v-autocomplete
      v-bind="$props"
      v-on="$listeners"
      :class="getClass"
      outlined
      single-line
      hide-details
    >
      <template v-for="(_, name) in $slots" #[name]="slotData">
        <slot :name="name" v-bind="slotData" />
      </template>
    </v-autocomplete>
  </span>
</template>

<script>
import { VAutocomplete } from "vuetify/lib";

export default {
  extends: VAutocomplete,
  props: {
    // 合并VAutocomplete原生所有props，$props才能正常获取对应属性值
    ...VAutocomplete.options.props,
    // 自定义扩展属性
    label: {
      type: String,
      default: ""
    }
  },
  computed: {
    getClass() {
      return "input-style font-size-input text-light-input placeholder-light border-radius-md select-style mt-0 mb-2";
    }
  },
  mounted() {
    // 此时打印$props可正常获取items等所有传入属性
    console.log(this.$props);
  }
};
</script>

该方案需要手动处理所有props、事件、插槽的绑定，维护成本更高，无深度定制需求不推荐使用。

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