舉一個封裝餓了麼地址選擇元件的例子
<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
</el-cascader>這是一個餓了麼的地址選擇元件(element-china-area-data)，問題在於v-model儲存的地址碼，後端需要的是地址的字串，所以需要對這個元件進行封裝。
先寫好基本結構
<template>
<div>
<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
</el-cascader>
</div>
</template>
<script>
import {
provinceAndCityData,
regionData,
provinceAndCityDataPlus,
regionDataPlus,
CodeToText,
TextToCode
} from 'element-china-area-data'
export default {
name: "AreaData",
data() {
return {
options: regionData,
selectedOptions: []
}
},
methods: {
handleChange(value) {
console.log(value)
}
},
created() {
},
computed: {
},
props: {
},
}
</script>
<style>
</style>
第一步設定model值（文件：cn.vuejs.org/v2/api/#model)
model: {
prop: 'autoValue',
event: 'changeAutoValue'
},prop代表v-model繫結的值，
event代表監聽prop中的變化事件並修改
第二步設定created中的初始化
created() {
this.selectedOptions = this.autoValue;
},
第三步監聽子元件的v-model值的變化
watch: {
selectedOptions(value) {
this.$emit('changeAutoValue', value)
}
}
完整程式碼
<template>
<div>
<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
</el-cascader>
</div>
</template>
<script>
import {
provinceAndCityData,
regionData,
provinceAndCityDataPlus,
regionDataPlus,
CodeToText,
TextToCode
} from 'element-china-area-data'
export default {
name: "AreaData",
data() {
return {
options: regionData,
selectedOptions: []
}
},
methods: {
handleChange(value) {
console.log(value)
}
},
created() {
this.selectedOptions = this.autoValue;
},
computed: {
},
props: {
autoValue: {
type: Array,
default: function() {
return [];
}
}
},
model: {
prop: 'autoValue',
event: 'changeAutoValue'
},
watch: {
selectedOptions(value) {
this.$emit('changeAutoValue', value)
}
}
}
</script>
<style>
</style>呼叫
<area-data v-model="item.area"></area-data>其實這個語法等同於
<area-data :autoValue='item.area' @changeAutoValue='(val)=>{item.area=val}'></area-data>本作品採用《CC 協議》，轉載必須註明作者和本文連結