vue怎么实现联动
Vue 联动实现方法
联动在 Vue 中通常指多个组件或数据之间的动态关联，常见场景包括表单联动、下拉框联动等。以下是几种常见的实现方式：
使用 v-model 和计算属性
通过 v-model 绑定数据，结合计算属性实现联动逻辑：
<template>
<select v-model="selectedCountry">
<option v-for="country in countries" :value="country.id">{{ country.name }}</option>
</select>
<select v-model="selectedCity">
<option v-for="city in filteredCities" :value="city.id">{{ city.name }}</option>
</select>
</template>
<script>
export default {
data() {
return {
selectedCountry: null,
selectedCity: null,
countries: [
{ id: 1, name: '中国' },
{ id: 2, name: '美国' }
],
cities: [
{ id: 1, countryId: 1, name: '北京' },
{ id: 2, countryId: 1, name: '上海' },
{ id: 3, countryId: 2, name: '纽约' }
]
}
},
computed: {
filteredCities() {
return this.cities.filter(city => city.countryId === this.selectedCountry)
}
}
}
</script>使用 watch 监听变化
当需要执行异步操作或复杂逻辑时，可以使用 watch：
watch: {
selectedCountry(newVal) {
if (newVal) {
// 可以在这里执行API请求获取城市数据
this.selectedCity = null
this.filteredCities = this.cities.filter(city => city.countryId === newVal)
}
}
}使用事件总线实现跨组件联动
对于非父子组件间的联动，可以使用事件总线：
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 组件A
EventBus.$emit('country-change', selectedCountryId)
// 组件B
EventBus.$on('country-change', (countryId) => {
this.loadCities(countryId)
})使用 Vuex 状态管理
对于大型应用，使用 Vuex 管理联动状态更合适：
// store.js
const store = new Vuex.Store({
state: {
selectedCountry: null,
cities: []
},
mutations: {
setCountry(state, countryId) {
state.selectedCountry = countryId
// 可以在这里触发获取城市数据的action
}
}
})
// 组件中使用
this.$store.commit('setCountry', countryId)表单联动验证示例
实现表单字段间的联动验证：
data() {
return {
form: {
password: '',
confirmPassword: ''
},
rules: {
confirmPassword: [
{
validator: (rule, value, callback) => {
if (value !== this.form.password) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
}
},
trigger: 'blur'
}
]
}
}
}动态组件联动
根据选择动态加载不同组件：
<component :is="currentComponent" @change="handleComponentChange"></component>以上方法可根据具体场景选择使用，简单的父子组件联动推荐使用 props 和事件，复杂场景建议使用 Vuex 或事件总线。
