当前位置：首页 > VUE

vue如何实现联动

2026-02-20 13:10:54VUE

Vue 实现联动的方法

联动是前端开发中常见的需求，Vue 提供了多种方式实现组件或数据之间的联动效果。

使用 v-model 和计算属性

通过 v-model 绑定数据，结合计算属性实现联动逻辑。

<template>
  <div>
    <select v-model="selectedProvince">
      <option v-for="province in provinces" :key="province">{{ province }}</option>
    </select>
    <select v-model="selectedCity">
      <option v-for="city in cities" :key="city">{{ city }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      provinces: ['江苏', '浙江', '广东'],
      cityData: {
        '江苏': ['南京', '苏州', '无锡'],
        '浙江': ['杭州', '宁波', '温州'],
        '广东': ['广州', '深圳', '珠海']
      }
    }
  },
  computed: {
    cities() {
      return this.cityData[this.selectedProvince] || []
    }
  }
}
</script>

使用 watch 监听数据变化

通过 watch 监听数据变化，执行联动操作。

<script>
export default {
  data() {
    return {
      form: {
        province: '',
        city: ''
      },
      cityOptions: []
    }
  },
  watch: {
    'form.province'(newVal) {
      if (newVal === '江苏') {
        this.cityOptions = ['南京', '苏州', '无锡']
      } else if (newVal === '浙江') {
        this.cityOptions = ['杭州', '宁波', '温州']
      } else {
        this.cityOptions = []
      }
      this.form.city = ''
    }
  }
}
</script>

使用事件总线实现跨组件联动

对于非父子组件间的联动，可以使用事件总线。

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

// ComponentA.vue
EventBus.$emit('province-change', selectedProvince)

// ComponentB.vue
EventBus.$on('province-change', (province) => {
  // 更新城市列表
})

使用 Vuex 状态管理

对于复杂应用的联动，使用 Vuex 管理共享状态。

// store.js
export default new Vuex.Store({
  state: {
    selectedProvince: '',
    cities: []
  },
  mutations: {
    setProvince(state, province) {
      state.selectedProvince = province
      // 根据省份更新城市列表
      state.cities = getCitiesByProvince(province)
    }
  }
})

// 组件中使用
this.$store.commit('setProvince', selectedProvince)

使用自定义指令实现 DOM 联动

通过自定义指令实现 DOM 元素间的联动效果。

Vue.directive('link', {
  bind(el, binding, vnode) {
    el.addEventListener('input', (e) => {
      const target = document.querySelector(binding.value)
      if (target) {
        target.value = e.target.value
      }
    })
  }
})

<input v-link="#targetInput">
<input id="targetInput">

联动表单验证示例

实现表单字段间的联动验证。

<template>
  <form>
    <input v-model="form.username" @blur="validateUsername">
    <input v-model="form.password" :class="{ error: passwordError }">
    <span v-if="passwordError">密码不能与用户名相同</span>
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      passwordError: false
    }
  },
  methods: {
    validateUsername() {
      if (this.form.password === this.form.username) {
        this.passwordError = true
      }
    }
  },
  watch: {
    'form.password'(newVal) {
      this.passwordError = newVal === this.form.username
    }
  }
}
</script>

动态组件联动

根据选择动态加载不同组件。

<template>
  <div>
    <select v-model="currentComponent">
      <option value="ComponentA">组件A</option>
      <option value="ComponentB">组件B</option>
    </select>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，简单的数据联动使用计算属性或 watch 即可，复杂场景建议使用 Vuex 或事件总线。

vue如何实现联动