当前位置：首页 > VUE

vue实现数据联动

2026-01-08 06:51:59VUE

vue实现数据联动

Vue 数据联动实现方法

数据联动在 Vue 中通常指多个组件或数据项之间的动态关联更新。以下是几种常见实现方式：

使用 v-model 和计算属性

<template>
  <div>
    <input v-model="inputA" placeholder="输入A">
    <input v-model="inputB" placeholder="输入B">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputA: '',
      inputB: ''
    }
  },
  computed: {
    inputB: {
      get() {
        return this.inputA.toUpperCase()
      },
      set(value) {
        this.inputA = value.toLowerCase()
      }
    }
  }
}
</script>

使用 watch 监听数据变化

<script>
export default {
  data() {
    return {
      formData: {
        province: '',
        city: '',
        district: ''
      },
      cityOptions: [],
      districtOptions: []
    }
  },
  watch: {
    'formData.province'(newVal) {
      this.cityOptions = this.getCities(newVal)
      this.formData.city = ''
      this.formData.district = ''
    },
    'formData.city'(newVal) {
      this.districtOptions = this.getDistricts(newVal)
      this.formData.district = ''
    }
  },
  methods: {
    getCities(province) {
      // 返回对应省份的城市列表
    },
    getDistricts(city) {
      // 返回对应城市的区县列表
    }
  }
}
</script>

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

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

// 组件A
<script>
import { EventBus } from './eventBus'
export default {
  methods: {
    updateData(value) {
      EventBus.$emit('data-updated', value)
    }
  }
}
</script>

// 组件B
<script>
import { EventBus } from './eventBus'
export default {
  created() {
    EventBus.$on('data-updated', (value) => {
      this.handleUpdate(value)
    })
  },
  methods: {
    handleUpdate(value) {
      // 处理数据更新
    }
  }
}
</script>

使用 Vuex 状态管理

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    mainValue: '',
    dependentValue: ''
  },
  mutations: {
    UPDATE_MAIN(state, payload) {
      state.mainValue = payload
      state.dependentValue = payload + ' processed'
    }
  }
})

// 组件中使用
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['mainValue', 'dependentValue'])
  },
  methods: {
    ...mapMutations(['UPDATE_MAIN']),
    handleInput(e) {
      this.UPDATE_MAIN(e.target.value)
    }
  }
}
</script>

使用 provide/inject 实现深层组件联动

// 祖先组件
<script>
export default {
  provide() {
    return {
      sharedData: this.sharedState
    }
  },
  data() {
    return {
      sharedState: {
        value: '',
        update: this.updateValue
      }
    }
  },
  methods: {
    updateValue(newVal) {
      this.sharedState.value = newVal
    }
  }
}
</script>

// 后代组件
<script>
export default {
  inject: ['sharedData'],
  template: `
    <div>
      <input v-model="localValue" @input="updateParent">
      <p>Parent value: {{ sharedData.value }}</p>
    </div>
  `,
  data() {
    return {
      localValue: ''
    }
  },
  methods: {
    updateParent() {
      this.sharedData.update(this.localValue)
    }
  }
}
</script>