0

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

由于我使用了很多，我只想制作一个单独的包装器组件，但现在我的选择不起作用。Vue 不知何故无法识别道具。我怎样才能使我v-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" }
      ]
    };
  }
};
4

1 回答 1

2

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

v-bind="$attrs"

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

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

v-model

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

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

计算二传手

父母v-model传下来一个value道具。在自定义元素（我称之为model）中创建一个计算设置器以与子元素一起使用v-model：

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

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

于 2020-12-20T11:36:13.777 回答