用vue3生成一段可以实现省市区三级联动的代码

好的，以下是使用 Vue3 生成一个可以实现省市区三级联动的示例代码：

<template>
  <div>
    <select v-model="selectedProvince" @change="onProvinceChange">
      <option v-for="(province, index) in provinces" :value="index">{{ province }}</option>
    </select>
    <select v-model="selectedCity" @change="onCityChange">
      <option v-for="(city, index) in cities" :value="index">{{ city }}</option>
    </select>
    <select v-model="selectedDistrict">
      <option v-for="(district, index) in districts" :value="index">{{ district }}</option>
    </select>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const data = reactive({
      provinces: ['北京市', '上海市', '广东省'],
      cities: [
        {
          provinceIndex: 0,
          cities: ['北京市']
        },
        {
          provinceIndex: 1,
          cities: ['上海市']
        },
        {
          provinceIndex: 2,
          cities: ['广州市', '深圳市', '珠海市']
        }
      ],
      districts: [
        {
          cityIndex: 0,
          districts: ['东城区', '西城区', '朝阳区']
        },
        {
          cityIndex: 1,
          districts: ['黄浦区', '徐汇区', '长宁区']
        },
        {
          cityIndex: 2,
          districts: ['天河区', '越秀区', '海珠区']
        },
        {
          cityIndex: 3,
          districts: ['福田区', '南山区', '罗湖区']
        },
        {
          cityIndex: 4,
          districts: ['香洲区', '金湾区', '斗门区']
        }
      ]
    })

    const selectedProvince = reactive({
      value: ''
    })

    const selectedCity = reactive({
      value: ''
    })

    const selectedDistrict = reactive({
      value: ''
    })

    const onProvinceChange = () => {
      // 重置市和区的选项
      selectedCity.value = ''
      selectedDistrict.value = ''
    }

    const onCityChange = () => {
      // 重置区的选项
      selectedDistrict.value = ''
    }

    return {
      data,
      selectedProvince,
      selectedCity,
      selectedDistrict,
      onProvinceChange,
      onCityChange,
      provinces: data.provinces,
      cities: data.cities.filter(city => city.provinceIndex === selectedProvince.value)[0]?.cities || [],
      districts: data.districts.filter(district => district.cityIndex === selectedCity.value)[0]?.districts || []
    }
  }
}
</script>

在上述代码中，我们使用了 `reactive` 函数来创建了三个响应式变量 `selectedProvince`、`selectedCity` 和 `selectedDistrict`，以及一个 `data` 对象来存储省市区数据。我们通过 `v-model` 指令将这三个响应式变量分别绑定到了三个下拉框中，并使用 `@change` 事件来监听用户的选择。在选择省份时，我们重置了市和区的选项；在选择市时，我们重置了区的选项。

此外，我们还使用了计算属性 `provinces`、`cities` 和 `districts` 来动态获取当前用户选择的省、市、区的选项。通过过滤 `data` 对象中的 `cities` 和 `districts`，我们可以获取到当前选择的省、市对应的所有可选项。

最后，我们将 `provinces`、`cities` 和 `districts` 暴露给模板中的 `v-for` 指令，从而渲染出下拉框中的所有选项。