如何为vue-select创建支持props传递与v-model绑定的可复用自定义包装组件

• 当前编写的Select组件只是空壳结构：仅在模板里放置了未做任何配置的<v-select />，没有把父组件传入的任何参数、事件、绑定值、插槽内容传递给内部的原生v-select，所有传入的配置自然全部失效。
• 组件本身没有声明任何prop接收规则，Vue在编译时会判定所有传入的参数都是组件未定义的静态属性，不会传递给内部的自定义元素，这也是框架识别不到传入props的核心原因。

不用手动枚举vue-select的上百个原生props，通过Vue的属性透传机制就能100%兼容所有原生功能，完整代码如下：

<template>
  <div class="select-wrapper">
    <v-select
      v-bind="$attrs"
      v-on="$listeners"
      :value="value"
      @input="handleInnerInput"
    >
      <!-- 透传所有自定义插槽，保证原组件的插槽功能不受封装影响 -->
      <template
        v-for="(_, slotName) in $slots"
        #[slotName]="slotProps"
      >
        <slot
          :name="slotName"
          v-bind="slotProps"
        />
      </template>
    </v-select>
  </div>
</template>

<script>
// 引入项目中已经安装配置好的vue-select组件
import vSelect from 'vue-select'

export default {
  name: 'Select',
  components: { vSelect },
  // 关闭默认的属性自动挂载，避免传入的参数被绑到最外层的div容器上
  inheritAttrs: false,
  props: {
    // 适配Vue2组件v-model的默认约定：value属性 + input事件
    value: {
      type: [String, Number, Array, Object],
      default: null
    }
  },
  methods: {
    handleInnerInput(newVal) {
      // 把内部组件的选中值变化抛给父组件，实现v-model双向绑定
      this.$emit('input', newVal)
    }
  }
}
</script>

• v-bind="$attrs"：自动把父组件传入的、没有被当前组件显式声明为prop的所有属性，原封不动传给内部的v-select，不需要逐行手动写透传规则，原生支持的所有props都能直接生效。
• v-on="$listeners"：自动把父组件绑定的所有事件监听器全部透传给内部的v-select，不管是原生的选中、搜索、删除选项事件，还是自定义的业务事件，都能正常被父组件捕获。
• inheritAttrs: false：避免透传的属性被自动挂到组件最外层的div包装容器上，防止出现样式冲突、属性错挂的问题。
• 插槽透传：把父组件传入的所有自定义插槽内容，原样传给内部的v-select，保证自定义选项展示、自定义标签这类扩展功能和原生用法完全一致。

原使用示例里的参数写法和vue-select的原生规则不匹配，即使透传逻辑正常，错误的参数名也会导致功能不生效，修正后的使用代码如下：

<template>
  <Select
    label="role"
    placeholder="Assesor"
    v-model="value1"
    :options="roles"
    multiple
  />
</template>

<script>
import Select from '@/components/Select.vue'
export default {
  name: "Admin",
  components: { Select },
  data() {
    return {
      value1: [],
      roles: [
        { role: "Assesors" },
        { role: "Finance" },
        { role: "Sales" }
      ]
    };
  }
};
</script>

常见参数写法修正：

• vue-select传入选项列表的属性是options，不存在from这个配置项
• 指定选项中用来做文本展示的字段，用label属性即可，不需要额外传key配置
• 不存在as这个原生配置属性，传入后不会生效

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