当前位置：首页 > VUE

vue实现联动 get

2026-01-16 06:59:06VUE

Vue 实现联动效果的方法

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

使用 v-model 和 props

父组件通过 props 传递数据给子组件，子组件通过 $emit 触发事件更新父组件数据：

vue实现联动 get

// 父组件
<template>
  <child-component v-model="parentData" />
</template>

<script>
export default {
  data() {
    return {
      parentData: ''
    }
  }
}
</script>

// 子组件
<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: ['value']
}
</script>

使用 Vuex 状态管理

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

// store.js
export default new Vuex.Store({
  state: {
    sharedData: ''
  },
  mutations: {
    updateData(state, payload) {
      state.sharedData = payload
    }
  }
})

// 组件A
<template>
  <input :value="$store.state.sharedData" @input="updateStore" />
</template>

<script>
export default {
  methods: {
    updateStore(e) {
      this.$store.commit('updateData', e.target.value)
    }
  }
}
</script>

// 组件B
<template>
  <div>{{ $store.state.sharedData }}</div>
</template>

使用事件总线

对于非父子组件通信，可创建事件总线：

vue实现联动 get

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

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

// 组件B
<script>
import { EventBus } from './eventBus'
export default {
  created() {
    EventBus.$on('data-change', data => {
      this.handleData(data)
    })
  }
}
</script>

使用 provide/inject

对于深层嵌套组件，可使用依赖注入：

// 祖先组件
<script>
export default {
  provide() {
    return {
      sharedData: this.sharedData
    }
  },
  data() {
    return {
      sharedData: 'initial value'
    }
  }
}
</script>

// 后代组件
<script>
export default {
  inject: ['sharedData'],
  methods: {
    updateData() {
      this.sharedData = 'new value'
    }
  }
}
</script>

表单联动实现示例

典型表单联动场景可通过计算属性和 watch 实现：

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