vue实现双联动
Vue 实现双联动的方法
双联动通常指两个下拉菜单或选择器之间的数据关联，例如选择一个省份后，城市下拉菜单自动更新为该省份下的城市列表。以下是实现方法：
使用 v-model 和 watch
定义两个数据属性分别存储两个选择器的值和选项列表：
data() {
return {
province: '',
city: '',
provinces: [],
cities: []
}
}在模板中使用 v-model 绑定选择器：
<select v-model="province">
<option v-for="p in provinces" :value="p.id">{{ p.name }}</option>
</select>
<select v-model="city">
<option v-for="c in cities" :value="c.id">{{ c.name }}</option>
</select>使用 watch 监听第一个选择器的变化：
watch: {
province(newVal) {
this.cities = this.getCitiesByProvince(newVal)
this.city = '' // 重置城市选择
}
}使用计算属性
另一种方法是利用计算属性动态生成第二个选择器的选项：
computed: {
filteredCities() {
return this.cities.filter(city => city.provinceId === this.province)
}
}模板中直接使用计算属性：
<select v-model="city">
<option v-for="c in filteredCities" :value="c.id">{{ c.name }}</option>
</select>使用事件处理
可以通过 @change 事件手动触发联动：
<select v-model="province" @change="onProvinceChange">
<!-- options -->
</select>在方法中处理事件：
methods: {
onProvinceChange() {
this.cities = this.getCitiesByProvince(this.province)
this.city = ''
}
}使用 Vuex 管理状态
对于大型应用，可以使用 Vuex 集中管理联动状态：
// store.js
state: {
province: '',
cities: []
},
mutations: {
setProvince(state, province) {
state.province = province
state.cities = getCitiesByProvince(province)
}
}组件中通过 mapState 和 mapMutations 使用：
computed: {
...mapState(['province', 'cities'])
},
methods: {
...mapMutations(['setProvince'])
}使用第三方组件
Element UI 等库提供了现成的级联选择器：
<el-cascader
v-model="selectedOptions"
:options="options"
></el-cascader>这些方法可以根据具体需求选择使用，watch 和计算属性适合简单场景，Vuex 适合复杂状态管理，第三方组件可以快速实现功能。
