vue基础省市区三级联动

Vue基础省市区三级联动可以通过以下步骤实现：

1. 创建一个Vue组件，在组件内部定义三个下拉框分别对应省、市、区/县。

2. 在组件的data中定义省、市、区/县的数据源，可以使用硬编码的方式，也可以通过Ajax请求获取远程数据。

3. 在组件的created钩子函数中，初始化省的数据源，并为省下拉框绑定change事件。

4. 在change事件处理函数中，根据省的选择，更新市的数据源，同时清空区/县的数据源，并为市下拉框绑定change事件。

5. 在市下拉框的change事件处理函数中，根据市的选择，更新区/县的数据源。

6. 在模板中使用v-for指令遍历省、市、区/县的数据源，生成下拉框选项。

7. 使用v-model指令绑定省、市、区/县的选择结果，实现数据的双向绑定。

下面是一个简单的Vue省市区三级联动的示例代码：

<template>
  <div>
    <select v-model="province" @change="onProvinceChange">
      <option v-for="(item, index) in provinceList" :value="item.value">{{item.label}}</option>
    </select>
    <select v-model="city" @change="onCityChange">
      <option v-for="(item, index) in cityList" :value="item.value">{{item.label}}</option>
    </select>
    <select v-model="district">
      <option v-for="(item, index) in districtList" :value="item.value">{{item.label}}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinceList: [
        { label: '北京市', value: '110000' },
        { label: '上海市', value: '310000' },
        { label: '广东省', value: '440000' },
      ],
      cityList: [],
      districtList: [],
      province: '',
      city: '',
      district: '',
    }
  },
  created() {
    this.initProvince()
  },
  methods: {
    initProvince() {
      // 初始化省数据源
      this.cityList = []
      this.districtList = []
      // TODO: 根据需要从远程获取省数据源
      this.province = this.provinceList[0].value
    },
    onProvinceChange() {
      // 省下拉框change事件处理函数
      this.cityList = [
        { label: '深圳市', value: '440300' },
        { label: '广州市', value: '440100' },
      ]
      this.districtList = []
      this.city = this.cityList[0].value
    },
    onCityChange() {
      // 市下拉框change事件处理函数
      this.districtList = [
        { label: '南山区', value: '440305' },
        { label: '福田区', value: '440304' },
        { label: '龙华区', value: '440309' },
      ]
      this.district = this.districtList[0].value
    },
  },
}
</script>