基于elementUI二次封装下拉框学年组件selecte组件（体验v-model给自身双数据绑定和给组件双数据绑定）

需求：

1、封装一个下拉框组件，选择学年

2、学年list默认是组件自带，如果父组件传值了用父组件传来的

3、默认选中当前年份

 

step：

1、components中定义SchoolYear.vue

/**
* props:
*    yearList // select数据 格式： [{text, value, checked}]
*    isSelected  // 是否选中checked: true
*    v-model // 同步数据 v-model='selected' 等价于 :selectedYear="selected" @yearChange='selected=$event' 将当前选中的值同步到父组件中的schoolYear
*/
<template>
  <!-- <el-select :value="currentYear" @change="handleChange">
    <el-option v-for="item in tempYearList" :key="item.value" :label="`${item.text}学年`" :value="item.value" />
  </el-select> -->
  <!-- 如果要用v-model替代:value="currentYear" @change="handleChange"，需要watch监听currentYear值的变化触发到父组件中selected值同步改变 -->
  <el-select v-model="currentYear">
    <el-option v-for="item in tempYearList" :key="item.value" :label="`${item.text}学年`" :value="item.value" />
  </el-select>
</template>
<script>
export default {
  model: {
    event: 'yearChange'
  },
  props: {
    yearList: Array,
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentYear: '',
      tempYearList: []
    }
  },
  watch: {
    currentYear: {
      handler(newVal) {
        this.$emit('yearChange', newVal)
      }
    }
  },
  created() {
    this.yearList && this.yearList.length
      ? this.setYearList(this.yearList)
      : this.setYearList([
          {
            checked: false,
            text: '2022',
            value: 2022
          },
          {
            checked: true,
            text: '2021',
            value: 2021
          },
          {
            checked: false,
            text: '2020',
            value: 2020
          }
        ])
  },
  methods: {
    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.currentYear = value
        // this.handleChange(value)
      }
    }
    // handleChange(val) {
    //   this.$emit('yearChange', val)
    //   this.currentYear = val
    // }
  }
}
</script>

　　在该组件中，v-model='currentYear'是:value="currentYear" @change="handleChange"的语法糖

2、引入并使用

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

    <SchoolYear v-model="selected" isSelected></SchoolYear>
    <!-- <SchoolYear @yearChange='selected=$event' isSelected></SchoolYear> -->
    <button @click="handleSubmit">点击</button>

　　在父组件调用该子组件时，使用v-model="selected"，其实是:selectedYear="selected" @yearChange='selected=$event'的语法糖，在SchoolYear.vue中需要定义model: { prop: 'selectedYear', event: 'yearChange' }。SchoolYear.vue中没有用到父组件传来的selectedYear，所以model中的prop我就省略了。

3、效果：