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

Question

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

Answer 1

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

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 prop。 在自定义元素中创建一个计算设置器（我称之为model ）以与孩子的v-model一起使用：

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

这是使用selected和as="role::role"的自定义包装器组件的更新演示