需求:
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、效果: