需求：

1、封裝一個下拉框元件，選擇學年

2、學年list預設是元件自帶，如果父元件傳值了用父元件傳來的

3、預設選中當前年份

step：

1、components中定義SchoolYear.vue

/**
* props:
*    placeHolder  // 顯示提示文字
*    yearList // select資料 格式： [{text, value, checked}]
*    isSelected  // 是否選中checked: true
*    v-model // 同步資料 v-model='schoolYear' 等價於 :schoolYear="schoolYear" @schoolYearChange='schoolYear=$event' 將當前選中的值同步到父元件中的schoolYear
 
*/
<template>
  <el-select :value="year" :placeholder="placeHolder" :clearable="clearable" :disabled="disabled" @change="handleChange">
    <el-option v-for="item in tempYearList" :key="item.value" :label="`${item.text}學年`" :value="item.value" />
  </el-select>
</template>
<script>
export 
 
default {
  name: 'SchoolYear',
  model: {
    // prop: 'schoolYear',
    event: 'schoolYearChange'
  },
  props: {
    placeHolder: {
      type: String,
      default: '請選擇學年'
    },
    yearList: {
      type: Array
    },
    isSelected: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      
 
default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    schoolYear: String | Number
  },
  data() {
    return {
      year: this.schoolYear,
      tempYearList: []
    }
  },
  created() {
    this.yearList && this.yearList.length
      ? this.setYearList(this.yearList)
      : this.getYearList()
  },
  methods: {
    getYearList() {
      // data實際應為介面返回資料
      const data = [
        {
          checked: false,
          text: '2022',
          value: 2022
        },
        {
          checked: true,
          text: '2021',
          value: 2021
        },
        {
          checked: false,
          text: '2020',
          value: 2020
        }
      ]
      this.setYearList(data)
    },
    setYearList(data) {
      this.tempYearList = data
      const { isSelected } = this
      const yearsArr = data.filter((n) => n.checked)
      const { length } = yearsArr
      if (length && isSelected) {
        const [{ value }] = yearsArr
        this.year = value
        this.handleChange(value)
      }
    },
    handleChange(val) {
      this.$emit('schoolYearChange', val)
      this.year = val
    }
  }
}
</script>

2、引入並使用

  data() {
    return {
      schoolYear: ''
    }
  },
  methods: {
    handleSubmit() {
      console.log('已選年份', this.schoolYear)
    }
  }

    <SchoolYear v-model="schoolYear" isSelected></SchoolYear>
    <!-- <SchoolYear :schoolYear="schoolYear" @schoolYearChange='schoolYear=$event' isSelected></SchoolYear> -->
    <button @click="handleSubmit">點選</button>

3、效果：