带有 props 和 v-model 的自定义包装组件答案

【问题标题】：Custom wrapper component with props and v-model带有 props 和 v-model 的自定义包装组件
【发布时间】：2021-03-30 08:40:46
【问题描述】：

我在我的应用程序中使用vue-select 库：https://github.com/desislavsd/vue-select。

由于我使用了很多，我只想制作一个单独的包装器组件，但现在我的选择不起作用。 Vue 不知何故无法识别道具。如何使我的v-select 成为一个单独的可重用组件，可以接受它的正常道具和工作？

这是我的 Select 组件：

<template>
    <div>
        <v-select/>
    </div>
</template>

<script>
export default {
    name: "Select",
}
</script>

这就是我使用它的方式：

<Select as="role" placeholder="Assesor" v-model="value1" :from="roles"  :key="roles.role" />

export default {
  name: "Admin",
  components: {
    Header,
    Select
  },
  data() {
    return {
      value1: [],
      selected: {
       role: ''
      },
      roles: [
        { role: "Assesors" },
        { role: "Finance" },
        { role: "Sales" }
      ]
    };
  }
};

【问题讨论】：

你没有传递任何道具
图书馆不应该提供它们吗？
什么是from？我在 API 中看不到那个道具
这里是jsfiddle.net/desislavsd/es2n6py0
如果我只使用它有效，但是当我通过组件尝试时它没有

标签： javascript vue.js vuejs2 vue-component vue-select

【解决方案1】：

这比看起来更复杂。您希望传递给自定义组件的 props 应用于内部 v-select 但 Vue 不知道这一点。其他人可能希望他们继续<div>。

`v-bind="$attrs"`

道具不会自动传递给子元素。为此，您需要：

<v-select v-bind="$attrs" />

`v-model`

现在，道具将应用于您选择的元素。但是由于v-model 是来自父级的具有隐藏功能的特殊道具，因此如果没有一些额外的准备，它就不会正确传递。您必须直接在孩子身上编码v-model：

<v-select v-bind="$attrs" v-model="model" />

计算设置器

父级的v-model 传递了一个value 属性。在自定义元素（我称之为model）中创建一个计算的setter，以与孩子的v-model一起使用：

computed: {
  model: {
    get() { return this.$attrs.value },
    set(val) { this.$emit('input', val) }
  }
}

这里是updated demo，带有一个使用selected 和as="role::role" 的自定义包装器组件

【讨论】：