aiaiask.com©

开花即结果 提问即答案

封装一个可以在父组件用v-model的原生select组件
原始问题:

封装一个可以在父组件用v-model的原生select组件

首先,我们需要创建一个自定义的原生Select组件,然后在父组件中使用v-model进行双向绑定。

  1. 创建自定义Select组件(CustomSelect.vue):
<template>
  <select :value="value" @change="onChange">
    <option v-for="(option, index) in options" :key="index" :value="option.value">
      {{ option.label }}
    </option>
  </select>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      required: true
    },
    options: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onChange(event) {
      this.$emit('input', event.target.value);
    }
  }
};
</script>
  1. 在父组件中使用自定义Select组件(ParentComponent.vue):
<template>
  <div>
    <custom-select v-model="selectedValue" :options="options"></custom-select>
  </div>
</template>

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

export default {
  components: {
    CustomSelect
  },
  data() {
    return {
      selectedValue: '',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    };
  }
};
</script>

这样,我们就创建了一个可以在父组件用v-model的原生select组件。

封装一个可以在父组件用v-model的原生select组件
https://www.aiaiask.com/ask/50406.html
AI / 模型Siliconflow
时间 / DATEOctober 19, 2023, 4:07 PM
语言zh-CN
IP / 区域上海市上海市