用vue3父子组件写一个简单的三级联动

好的，下面是一个简单的三级联动的示例代码：

父组件模板：

<template>
  <div>
    <select v-model="selectedProvince" @change="onProvinceChange">
      <option v-for="province in provinces" :value="province">{{province.name}}</option>
    </select>
    <select v-model="selectedCity" @change="onCityChange">
      <option v-for="city in cities" :value="city">{{city.name}}</option>
    </select>
    <select v-model="selectedArea">
      <option v-for="area in areas" :value="area">{{area.name}}</option>
    </select>
  </div>
</template>

父组件脚本：

import { reactive } from 'vue';
import provinces from './provinces';

export default {
  setup() {
    const state = reactive({
      selectedProvince: null,
      selectedCity: null,
      selectedArea: null,
      cities: [],
      areas: [],
    });

    const onProvinceChange = () => {
      state.cities = state.selectedProvince.cities;
      state.selectedCity = null;
      state.areas = [];
    };

    const onCityChange = () => {
      state.areas = state.selectedCity.areas;
      state.selectedArea = null;
    };

    return {
      provinces,
      ...state,
      onProvinceChange,
      onCityChange,
    };
  },
};

子组件模板：

<template>
  <option :value="item">{{item.name}}</option>
</template>

子组件脚本：

import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
});

其中，`provinces` 是一个包含省市区信息的数组，每个省市区的信息包含 `name` 和 `cities` 或 `areas` 字段，分别表示下属的城市或区县。

在父组件中，我们使用 `reactive` 创建了一个响应式的状态对象 `state`，包含了当前选择的省市区对象和下一级的城市和区县列表。在 `onProvinceChange` 和 `onCityChange` 方法中，根据当前选择的省市对象更新下一级城市或区县列表，并将当前选择的城市或区县重置为 `null`。

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

在子组件中，我们使用 `defineComponent` 定义一个简单的选项组件，接收一个 `item` 属性，表示当前选项对象，渲染选项内容。