当前位置：首页 > VUE

vue实现联动效果

2026-02-20 12:32:04VUE

Vue 实现联动效果的方法

联动效果通常指多个组件或数据之间的动态关联，例如下拉菜单联动、表单字段联动等。以下是几种常见的实现方式：

使用 v-model 和 watch

通过 v-model 绑定数据，利用 watch 监听数据变化并触发联动逻辑。

vue实现联动效果

<template>
  <select v-model="selectedCountry" @change="updateCities">
    <option v-for="country in countries" :value="country.id">
      {{ country.name }}
    </option>
  </select>
  <select v-model="selectedCity">
    <option v-for="city in cities" :value="city.id">
      {{ city.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      countries: [
        { id: 1, name: 'China' },
        { id: 2, name: 'USA' }
      ],
      cities: [],
      selectedCountry: null,
      selectedCity: null
    }
  },
  methods: {
    updateCities() {
      this.cities = getCitiesByCountry(this.selectedCountry)
    }
  }
}
</script>

使用计算属性

通过计算属性动态生成联动数据，适用于依赖关系明确的场景。

<template>
  <select v-model="selectedCategory">
    <option v-for="category in categories" :value="category.id">
      {{ category.name }}
    </option>
  </select>
  <select v-model="selectedProduct">
    <option v-for="product in filteredProducts" :value="product.id">
      {{ product.name }}
    </option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { id: 1, name: 'Electronics' },
        { id: 2, name: 'Clothing' }
      ],
      products: [
        { id: 1, name: 'Phone', categoryId: 1 },
        { id: 2, name: 'Laptop', categoryId: 1 },
        { id: 3, name: 'Shirt', categoryId: 2 }
      ],
      selectedCategory: null,
      selectedProduct: null
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(
        product => product.categoryId === this.selectedCategory
      )
    }
  }
}
</script>

使用事件总线

对于跨组件联动，可以通过事件总线实现通信。

vue实现联动效果

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

<!-- ComponentA.vue -->
<template>
  <select v-model="selectedOption" @change="emitChange">
    <option v-for="option in options" :value="option.id">
      {{ option.name }}
    </option>
  </select>
</template>

<script>
import { EventBus } from './event-bus'
export default {
  data() {
    return {
      options: [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' }
      ],
      selectedOption: null
    }
  },
  methods: {
    emitChange() {
      EventBus.$emit('option-changed', this.selectedOption)
    }
  }
}
</script>

<!-- ComponentB.vue -->
<template>
  <div>{{ dependentData }}</div>
</template>

<script>
import { EventBus } from './event-bus'
export default {
  data() {
    return {
      dependentData: null
    }
  },
  created() {
    EventBus.$on('option-changed', optionId => {
      this.dependentData = fetchDataBasedOnOption(optionId)
    })
  }
}
</script>

使用 Vuex 状态管理

对于复杂应用的联动，Vuex 提供集中式状态管理。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    selectedRegion: null,
    districts: []
  },
  mutations: {
    setRegion(state, regionId) {
      state.selectedRegion = regionId
      state.districts = getDistrictsByRegion(regionId)
    }
  }
})

<!-- RegionSelector.vue -->
<template>
  <select v-model="region" @change="updateRegion">
    <option v-for="region in regions" :value="region.id">
      {{ region.name }}
    </option>
  </select>
</template>

<script>
export default {
  computed: {
    region: {
      get() {
        return this.$store.state.selectedRegion
      },
      set(value) {
        this.$store.commit('setRegion', value)
      }
    }
  }
}
</script>

<!-- DistrictSelector.vue -->
<template>
  <select v-model="selectedDistrict">
    <option v-for="district in districts" :value="district.id">
      {{ district.name }}
    </option>
  </select>
</template>

<script>
export default {
  computed: {
    districts() {
      return this.$store.state.districts
    }
  }
}
</script>

使用 provide/inject

对于深层嵌套组件的联动，provide/inject 可以避免 prop 逐层传递。

<!-- ParentComponent.vue -->
<template>
  <child-component />
</template>

<script>
export default {
  provide() {
    return {
      sharedState: this.sharedData
    }
  },
  data() {
    return {
      sharedData: {
        selectedValue: null,
        updateValue: this.updateValue
      }
    }
  },
  methods: {
    updateValue(newValue) {
      this.sharedData.selectedValue = newValue
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <select v-model="internalValue" @change="handleChange">
    <option v-for="item in items" :value="item.id">
      {{ item.name }}
    </option>
  </select>
</template>

<script>
export default {
  inject: ['sharedState'],
  data() {
    return {
      internalValue: null
    }
  },
  methods: {
    handleChange() {
      this.sharedState.updateValue(this.internalValue)
    }
  }
}
</script>