vue自定义组件实现父子组件数据双向绑定

假设我们正在开发一个自定义选择组件，该组件允许用户从下拉列表中选择一个选项，但我们希望仅在用户选择发生改变时更新父组件的数据，这时可以利用 model: { event: ‘change’ } 来实现：

<!-- CustomSelect.vue -->
<template>
  <select @change="onChange">
    <option v-for="option in options" :key="option.value" :value="option.value">
      {{ option.text }}
    </option>
  </select>
</template>

<script>
export default {
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    modelValue: [String, Number],
    options: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onChange(event) {
      this.$emit('change', event.target.value);
    }
  }
}
</script>

在这个组件中，我们监听了 的 change 事件，并在这个事件触发时，通过 $emit 发出了一个名为 change 的事件，同时将选中的值作为参数传递。这样，当使用 v-model 绑定这个组件时，Vue知道应该在 change 事件触发时更新数据，而不是默认的 input 事件。

父组件中的应用

现在，假设我们有一个父组件，需要使用这个自定义选择组件：

<template>
  <div>
    <custom-select v-model="selectedOption" :options="options"></custom-select>
    <p>选中的值：{{ selectedOption }}</p>
  </div>
</template>

<script>
import CustomSelect from './CustomSelect.vue'

export default {
  components: {
    CustomSelect
  },
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', text: '选项1' },
        { value: 'option2', text: '选项2' },
        // 更多选项...
      ]
    }
  }
}
</script>

在父组件中，通过 v-model 绑定 selectedOption 到 CustomSelect 组件。由于 CustomSelect 组件通过 model: { event: ‘change’ } 定义了使用 change 事件来更新 v-model 绑定的值，因此当用户更改选择时，selectedOption 的值将相应更新，并在界面上实时反映出来。