Vue3..0实现省市区三级联动，下拉框，简单易懂

下面是一个简单易懂的 Vue 3.0 实现省市区三级联动下拉框的示例代码：

<template>
  <div>
    <select v-model="selectedProvince" @change="onProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="(province, index) in provinces" :key="index" :value="province">{{ province }}</option>
    </select>
    <select v-model="selectedCity" @change="onCityChange">
      <option value="">请选择城市</option>
      <option v-for="(city, index) in cities" :key="index" :value="city">{{ city }}</option>
    </select>
    <select v-model="selectedDistrict">
      <option value="">请选择区县</option>
      <option v-for="(district, index) in districts" :key="index" :value="district">{{ district }}</option>
    </select>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const provinces = ref(['北京市', '上海市', '广东省']); // 省份列表
    const cities = ref([]); // 城市列表
    const districts = ref([]); // 区县列表
    const selectedProvince = ref(''); // 当前选择的省份
    const selectedCity = ref(''); // 当前选择的城市
    const selectedDistrict = ref(''); // 当前选择的区县

    function onProvinceChange() {
      // 根据选择的省份来更新城市列表
      if (selectedProvince.value === '北京市') {
        cities.value = ['北京市'];
      } else if (selectedProvince.value === '上海市') {
        cities.value = ['上海市'];
      } else if (selectedProvince.value === '广东省') {
        cities.value = ['广州市', '深圳市', '珠海市'];
      }
      selectedCity.value = ''; // 重置选择的城市
      selectedDistrict.value = ''; // 重置选择的区县
      districts.value = []; // 清空区县列表
    }

    function onCityChange() {
      // 根据选择的城市来更新区县列表
      if (selectedCity.value === '北京市') {
        districts.value = ['东城区', '西城区', '朝阳区'];
      } else if (selectedCity.value === '上海市') {
        districts.value = ['黄浦区', '徐汇区', '长宁区'];
      } else if (selectedCity.value === '广州市') {
        districts.value = ['越秀区', '海珠区', '天河区'];
      } else if (selectedCity.value === '深圳市') {
        districts.value = ['福田区', '南山区', '罗湖区'];
      } else if (selectedCity.value === '珠海市') {
        districts.value = ['香洲区', '金湾区', '斗门区'];
      }
      selectedDistrict.value = ''; // 重置选择的区县
    }

    return {
      provinces,
      cities,
      districts,
      selectedProvince,
      selectedCity,
      selectedDistrict,
      onProvinceChange,
      onCityChange,
    };
  },
};
</script>

在这个示例中，我们使用了 Vue 3.0 新引入的 `ref` 函数来定义响应式变量。我们将省份列表、城市列表、区县列表、当前选择的省份、城市、区县都定义为响应式变量。当选择省份或城市时，我们会根据选择的省份或城市来更新对应的城市或区县列表，并重置选择的城市或区县。最后，我们将这些变量和方法都返回给模板中使用。