省市区三级联动（vue）

好的，下面是一个基于 Vue 的省市区三级联动的示例代码：

父组件模板：

<template>
  <div>
    <select v-model="selectedProvince" @change="onProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="province in provinces" :value="province">{{province.name}}</option>
    </select>
    <select v-model="selectedCity" @change="onCityChange" :disabled="!selectedProvince">
      <option value="">请选择城市</option>
      <option v-for="city in cities" :value="city">{{city.name}}</option>
    </select>
    <select v-model="selectedArea" :disabled="!selectedCity">
      <option value="">请选择区县</option>
      <option v-for="area in areas" :value="area">{{area.name}}</option>
    </select>
  </div>
</template>

父组件脚本：

export default {
  data() {
    return {
      provinces: [], // 省份列表
      cities: [], // 城市列表
      areas: [], // 区县列表
      selectedProvince: null, // 当前选择的省份
      selectedCity: null, // 当前选择的城市
      selectedArea: null, // 当前选择的区县
    };
  },
  created() {
    this.loadProvinces();
  },
  methods: {
    loadProvinces() {
      // 加载省份列表
      // 可以通过异步请求从后端获取
      // 这里为了简化示例，使用了静态数据
      this.provinces = [
        { name: '北京市' },
        { name: '天津市' },
        { name: '河北省' },
        { name: '山西省' },
        { name: '内蒙古自治区' },
        // 省份数据省略...
      ];
    },
    onProvinceChange() {
      // 省份变化时，重新加载城市列表
      if (this.selectedProvince) {
        // 可以通过异步请求从后端获取
        // 这里为了简化示例，使用了静态数据
        this.cities = [
          { name: '北京市' },
          { name: '天津市' },
          { name: '石家庄市' },
          { name: '唐山市' },
          { name: '秦皇岛市' },
          // 城市数据省略...
        ];
        this.selectedCity = null;
        this.areas = [];
      }
    },
    onCityChange() {
      // 城市变化时，重新加载区县列表
      if (this.selectedCity) {
        // 可以通过异步请求从后端获取
        // 这里为了简化示例，使用了静态数据
        this.areas = [
          { name: '东城区' },
          { name: '西城区' },
          { name: '朝阳区' },
          { name: '丰台区' },
          { name: '石景山区' },
          // 区县数据省略...
        ];
        this.selectedArea = null;
      }
    },
  },
};

在父组件中，我们定义了省份、城市和区县三个列表，以及当前选择的省份、城市和区县。在 `created` 钩子中，调用 `loadProvinces` 方法加载省份列表。

在模板中，我们使用 `v-for` 循环渲染省份、城市和区县的选项，并使用 `v-model` 绑定当前选择的省份、城市和区县。在省份和城市选项的 `change` 事件中，分别调用 `onProvinceChange` 和 `onCityChange` 方法更新下一级城市或区县列表。

需要注意的是，城市和区县的选项需要在 `selectedProvince` 和 `selectedCity` 非空的情况下才能启用，因此我们使用 `:disabled` 属性绑定选项的禁用状态。

以上就是一个基于 Vue 的省市区三级联动的示例代码。