用vue写一个三级联动

可以使用vue的组件来实现三级联动。首先，需要定义三个组件，分别代表三个级别的选项。然后，在父组件中，将这三个组件组合起来，实现三级联动的效果。

以下是一个简单的示例代码：

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

<script>
export default {
data() {
return {
provinces: ['北京', '上海', '广东'],
cities: [],
districts: [],
selectedProvince: '',
selectedCity: '',
selectedDistrict: ''
}
},
methods: {
onProvinceChange() {
// 根据选择的省份，更新城市列表
if (this.selectedProvince === '北京') {
this.cities = ['北京市'];
} else if (this.selectedProvince === '上海') {
this.cities = ['上海市'];
} else if (this.selectedProvince === '广东') {
this.cities = ['广州市', '深圳市', '珠海市'];
} else {
this.cities = [];
}
this.selectedCity = '';
this.selectedDistrict = '';
},
onCityChange() {
// 根据选择的城市，更新区县列表
if (this.selectedCity === '北京市') {
this.districts = ['东城区', '西城区', '朝阳区'];
} else if (this.selectedCity === '上海市') {
this.districts = ['黄浦区', '徐汇区', '长宁区'];
} else if (this.selectedCity === '广州市') {
this.districts = ['天河区', '海珠区', '荔湾区'];
} else if (this.selectedCity === '深圳市') {
this.districts = ['福田区', '罗湖区', '南山区'];
} else if (this.selectedCity === '珠海市') {
this.districts = ['香洲区', '斗门区', '金湾区'];
} else {
this.districts = [];
}
this.selectedDistrict = '';
}
}
}
</script>

在这个示例中，我们定义了三个下拉框，分别用于显示省份、城市和区县的选项。在父组件中，我们使用v-model指令来绑定选中的值。在onProvinceChange和onCityChange方法中，我们根据选择的省份和城市，更新城市和区县的选项列表。最后，我们将这三个组件组合起来，实现三级联动的效果。