当前位置：首页 > VUE

vue实现联动

2026-01-08 02:54:22VUE

Vue 实现联动效果

联动效果通常指多个组件或表单元素之间相互影响，例如选择省份后动态加载城市列表。Vue 提供了多种方式实现联动，包括数据绑定、计算属性、侦听器等。

数据驱动联动

通过 Vue 的响应式数据特性，当数据变化时自动更新视图：

vue实现联动

<template>
  <select v-model="selectedProvince">
    <option v-for="p in provinces" :value="p.id">{{ p.name }}</option>
  </select>
  <select v-model="selectedCity">
    <option v-for="c in filteredCities" :value="c.id">{{ c.name }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      provinces: [{id: 1, name: '广东'}, {id: 2, name: '浙江'}],
      cities: [
        {id: 1, provinceId: 1, name: '广州'},
        {id: 2, provinceId: 1, name: '深圳'},
        {id: 3, provinceId: 2, name: '杭州'}
      ],
      selectedProvince: null,
      selectedCity: null
    }
  },
  computed: {
    filteredCities() {
      return this.cities.filter(c => c.provinceId === this.selectedProvince)
    }
  }
}
</script>

侦听器实现复杂联动

当需要执行异步操作或复杂逻辑时，可以使用侦听器：

watch: {
  selectedProvince(newVal) {
    if (newVal) {
      // 模拟异步获取城市数据
      fetchCities(newVal).then(cities => {
        this.filteredCities = cities
      })
    }
  }
}

组件间联动

父子组件间通过 props 和 events 实现联动：

vue实现联动

// 父组件
<child-component :value="parentValue" @change="handleChildChange" />

// 子组件
props: ['value'],
methods: {
  emitChange(newVal) {
    this.$emit('change', newVal)
  }
}

使用 Vuex 管理联动状态

对于跨组件复杂联动，可以使用 Vuex 集中管理状态：

// store.js
state: {
  province: null,
  cities: []
},
mutations: {
  setProvince(state, province) {
    state.province = province
    // 可以在这里触发获取城市数据的action
  }
}

// 组件中
computed: {
  province: {
    get() { return this.$store.state.province },
    set(value) { this.$store.commit('setProvince', value) }
  }
}

表单元素联动

表单元素间联动可以通过 v-model 和计算属性实现：

<template>
  <input v-model="fullName" placeholder="全名">
  <input v-model="firstName" placeholder="名">
  <input v-model="lastName" placeholder="姓">
</template>

<script>
export default {
  computed: {
    fullName: {
      get() { return `${this.firstName} ${this.lastName}` },
      set(value) {
        const parts = value.split(' ')
        this.firstName = parts[0]
        this.lastName = parts[1] || ''
      }
    }
  }
}
</script>