Блог

Главная - Вопросы по программированию - Пользовательский компонент-оболочка с реквизитами и v-моделью

Пользовательский компонент-оболочка с реквизитами и v-моделью

#javascript #vue.js #vuejs2 #vue-component #vue-select

#javascript #vue.js #vuejs2 #vue-компонент #vue-выберите

Вопрос:

Я использую 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" }
      ]
    };
  }
};

Комментарии:

1. вы не передаете никаких реквизитов

2. разве они не должны быть доступны из библиотеки?

3. Что такое from ? Я не вижу этого реквизита в API

4. Вот оно jsfiddle.net/desislavsd/es2n6py0

5. Если я просто использую <v-select as=»role» placeholder=»Assesor» v-model=»value1″ :from=»роли» :key=»роли.роль» /> это работает, но когда я пытаюсь через компонент, это не работает

Ответ №1:

Это сложнее, чем кажется. Вы ожидаете, что реквизит, переданный пользовательскому компоненту, будет применен к внутреннему v-select , но Vue этого не знает. Кто-то еще может ожидать, что они перейдут на <div> .

v-bind="$attrs"

Реквизит автоматически не передается дочернему элементу. Для этого вам нужно:

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

v-model

Теперь реквизит применяется к выбранному вами элементу. Но поскольку v-model это специальный реквизит от родительского элемента со скрытой функциональностью, он не передается должным образом без дополнительной подготовки. Вам придется кодировать a v-model непосредственно для дочернего элемента:

 <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"