vue select 组件封装及调用

子组件 mySelect.vue

<template>
  <div class="mySelect">
    <el-select v-model="value1" placeholder="请选择" @change="handleSelect">
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    seldVal: {
      type: String | Number,
      default: ''
    },
    hasAll: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      options1: [],
      value1: ''
    }
  },
  watch: {
    options: {
      immediate: true,
      handler (v, ov) {
        if (this.hasAll) {
          this.options1 = [{label: '全部', value:''}, ...v]
        } else {
          this.options1 = [...v]
        }
      }
    },
    seldVal (v, ov) {
      console.log('seldVal', v)
      this.value1 = v
    }
  },
  methods: {
    handleSelect (val) {
      this.$emit('update:seldVal', val)
    }
  }
}
</script>
<style lang="scss">
</style>

父组件调用

<el-form-item label="车位状态">
            <my-select :hasAll="false" :options="placeStatus_options" :seldVal.sync="searchParam.placeStatus"></my-select> // .sync是异步，子组件修改值也可以直接更新父组件的值，默认值是父组件searchParam.placeStatus赋值

</el-form-item>