vue实现双联动

Vue 实现双联动

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

使用 v-model 和计算属性

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

<template>
  <div>
    <input v-model="input1" @input="updateInput2" />
    <input v-model="input2" @input="updateInput1" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: '',
      input2: ''
    }
  },
  methods: {
    updateInput2() {
      this.input2 = this.input1.toUpperCase()
    },
    updateInput1() {
      this.input1 = this.input2.toLowerCase()
    }
  }
}
</script>

使用 Vuex 状态管理

通过 Vuex 集中管理状态，实现跨组件联动。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    value1: '',
    value2: ''
  },
  mutations: {
    setValue1(state, payload) {
      state.value1 = payload
      state.value2 = payload.toUpperCase()
    },
    setValue2(state, payload) {
      state.value2 = payload
      state.value1 = payload.toLowerCase()
    }
  }
})

<template>
  <div>
    <input :value="value1" @input="updateValue1" />
    <input :value="value2" @input="updateValue2" />
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['value1', 'value2'])
  },
  methods: {
    ...mapMutations(['setValue1', 'setValue2']),
    updateValue1(e) {
      this.setValue1(e.target.value)
    },
    updateValue2(e) {
      this.setValue2(e.target.value)
    }
  }
}
</script>

使用自定义事件

通过自定义事件实现父子组件之间的联动。

<!-- Parent.vue -->
<template>
  <div>
    <Child1 :value="value1" @update="handleUpdate1" />
    <Child2 :value="value2" @update="handleUpdate2" />
  </div>
</template>

<script>
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

export default {
  components: { Child1, Child2 },
  data() {
    return {
      value1: '',
      value2: ''
    }
  },
  methods: {
    handleUpdate1(val) {
      this.value1 = val
      this.value2 = val.toUpperCase()
    },
    handleUpdate2(val) {
      this.value2 = val
      this.value1 = val.toLowerCase()
    }
  }
}
</script>

<!-- Child1.vue -->
<template>
  <input :value="value" @input="$emit('update', $event.target.value)" />
</template>

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

使用 watch 监听数据变化

通过 watch 监听数据变化，实现联动效果。

<template>
  <div>
    <input v-model="value1" />
    <input v-model="value2" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: '',
      value2: ''
    }
  },
  watch: {
    value1(newVal) {
      this.value2 = newVal.toUpperCase()
    },
    value2(newVal) {
      this.value1 = newVal.toLowerCase()
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，灵活实现 Vue 中的双联动效果。