当前位置：首页 > VUE

vue 动态实现联动

2026-02-20 08:16:56VUE

动态联动实现方法

在Vue中实现动态联动通常涉及父子组件通信、状态管理或事件驱动机制。以下是几种常见方法：

使用v-model和计算属性

通过v-model绑定数据结合计算属性实现联动：

<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 {
      selectedProvince: null,
      selectedCity: null,
      provinces: [...],
      cities: [...]
    }
  },
  computed: {
    filteredCities() {
      return this.cities.filter(c => c.provinceId === this.selectedProvince)
    }
  }
}
</script>

事件驱动方式

通过自定义事件触发联动更新：

<template>
  <province-select @change="handleProvinceChange" />
  <city-select :province-id="currentProvince" />
</template>

<script>
export default {
  data() {
    return { currentProvince: null }
  },
  methods: {
    handleProvinceChange(id) {
      this.currentProvince = id
    }
  }
}
</script>

使用Vuex状态管理

对于复杂联动场景，可使用Vuex集中管理状态：

// store.js
const store = new Vuex.Store({
  state: {
    selectedRegion: null
  },
  mutations: {
    setRegion(state, payload) {
      state.selectedRegion = payload
    }
  }
})

// 组件内
this.$store.commit('setRegion', regionId)

动态组件方式

通过is特性实现组件级联动：

vue 动态实现联动

<template>
  <component :is="currentComponent" @next="handleNextStep" />
</template>

<script>
export default {
  data() {
    return { currentComponent: 'Step1' }
  },
  methods: {
    handleNextStep(componentName) {
      this.currentComponent = componentName
    }
  }
}
</script>