javascript - 如何在自定义选择组件中使用多个 v-model？

Question

我有以下 vue 组件

<template>
    <div id="input-div">
    <label v-if="label">{{ label }}</label>
    <select :multiple="multiple" :value="value" @change="change($event.target.value)">
         <slot></slot>
    </select>
    <div class="error"><slot name="error"></slot></div>
    </div>
</template>

<script>
    export default {
        name: 'ha-select',
        props: ['label', 'value', 'multiple'],
        methods: {
            change(value) {
                this.$emit('input', value);
            }
        }
    }
</script>

并且由于它是一个选择组件，我希望它可以与 v-model 一起使用，当 multiple 属性未设置但当我设置 multiple pass v-model 一个数组，而不是将所选值附加到数组，该数组只是被当前所选选项的值替换。也许这与我发出 input 事件的方式有关。 那么我该如何创建一个自定义的select组件来支持多个呢？

Answer 1

我稍微修改了代码以使用绑定(bind)到通过 v-model 选择的局部变量并发出绑定(bind)值。当 multiple 为真时，这会导致发出选定值的数组。

console.clear()

const CustomSelect = {
  template: `
  <div id="input-div">
    <label v-if="label">{{ label }}</label>
    <select :multiple="multiple" v-model="selected" @change="$emit('input', selected)">
      <slot></slot>
    </select>
    <div class="error"><slot name="error"></slot></div>
  </div>
  `,
  name: 'ha-select',
  props: ['label', 'value', 'multiple'],
  data(){
    return {
      selected:this.value
    }
  },
}
new Vue({
  el:"#app",
  data:{
    albums: []
  },
  components: {
    CustomSelect
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <custom-select label="Pink Floyd Albums" v-model="albums" :multiple="true">
    <option value="1">Dark Side of the Moon</option>
    <option value="2">Animals</option>
    <option value="3">The Wall</option>
  </custom-select>
  <div>
    Selected Albums {{albums}}
  </div>
</div>