v-model 实现省市的二级联动

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可以监听到.