const datas = [
{
city: '北京市',
area: [
'东城区',
'西城区',
'朝阳区',
'丰台区',
'石景山区',
'海淀区',
'门头沟区',
'房山区',
'通州区',
'顺义区',
'昌平区',
'大兴区',
'怀柔区',
'平谷区',
'密云区',
'延庆区'
]
},
{
city: '唐山市',
area: [
'路南区',
'路北区',
'古冶区',
'开平区',
'丰南区',
'丰润区',
'曹妃甸区',
'滦县',
'滦南县',
'乐亭县',
'迁西县',
'玉田县',
'遵化市',
'迁安市'
]
},
{
city: '石河子市',
area: ['石河子市']
},
{
city: '阿拉尔市',
area: ['阿拉尔市']
},
{
city: '图木舒克市',
area: ['图木舒克市']
},
{
city: '五家渠市',
area: ['五家渠市']
},
{
city: '铁门关市',
area: ['铁门关市']
}
]
// 所有省
export const provinces = () => {
return datas.map(item => {
return item.city
})
}
// 所有城市
export const citys = pname => { // 定义的时候是形参,函数调用的时候是实参
for (const item of datas) {
if (item.city === pname) {
return item.area
}
}
return [] //这个是return 空 有可能城市下没有area 那么就返回空数组
}
这里引入的时候有个改名的操作:
那 pname 是形参, 那就要找谁调用了 citys,看上面citys改名为getCitys,那就去找getCitys
这里传入了e ,e是当前select 选中的值,
element官网:
这个change事件的参数就是当前选中的值。
一般把这个省市的联动封装成一个组件
provAndCity: {
province: '',
city: ''
},
父组件绑定v-model, 子组件使用props接收:
props: ['value'], // 这个value就能收到父组件v-model绑定的值,必须用value
这是子组件中的 点击事件:
子组件中的:
created () {
this.getCityData()
},
methods: {
// 获取省
getCityData: function () {
this.provinceList = getProvinces() // 调接口
if (this.provAndCity.province) { //如果这个省存在
this.cityList = getCitys(this.provAndCity.province) // 带着省 去调接口获取市
}
},
// 点击了省
handleProvince: function (e) { //这个e是change事件参数,代表当前选中的值 打印出来是当前点的省份
this.cityList = getCitys(e) //把当前省 带着去发请求 得到市
this.$emit('input', { //因为 用的是v-model,所以这必须是input
province: this.provAndCity.province,
city: this.cityList[0] //这个是选市的第一个元素
})
}
// 点击了市
handleCity: function (e) { //同上,这个e 代表当前选中的值
this.$emit('input', {
province: this.provAndCity.province,
city: e
})
}
},
watch: {
value: {
handler (newVal, oldVal) {
console.log(newVal) // {city: "xxxxx" province: "xxxxx"}
this.provAndCity.province = newVal.province //这个是拿到最新的用户选择的省份
this.cityList = getCitys(newVal.province) //带着省查询市 这个是发请求
this.provAndCity.city = newVal.city //这个是更新市
},
deep: true //深度监听 数组对象形式的都能监听到
}
}
以下是watch是如何使用的: 看一张图,用户选择的最新的省,市 通过watch可以监听到.