带有 props 和 v-model 的自定义包装器组件 v-bind="$attrs"v-model计算二传手

问题描述

我在我的应用中使用 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" }
      ]
    };
  }
};

解决方法

这比看起来更复杂。您希望传递给自定义组件的 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) }
  }
}

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