当前位置：首页 > VUE

vue实现数组双向绑定

2026-01-20 08:28:12VUE

实现数组双向绑定的方法

在Vue中，实现数组的双向绑定通常需要结合v-model指令或自定义事件处理。以下是几种常见的方法：

使用`v-model`绑定数组

Vue的v-model指令默认支持表单元素的双向绑定，但直接用于数组时需要结合value和input事件。例如，在复选框组中实现数组双向绑定：

vue实现数组双向绑定

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input
        type="checkbox"
        :value="option.value"
        v-model="selectedOptions"
      />
      {{ option.label }}
    </label>
    <p>Selected options: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' },
      ],
      selectedOptions: [],
    };
  },
};
</script>

自定义组件实现数组双向绑定

如果需要在一个自定义组件中实现数组的双向绑定，可以通过v-model和emit事件实现：

<template>
  <div>
    <custom-list v-model="items" />
    <p>Items: {{ items }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
  components: {
    'custom-list': {
      props: ['value'],
      template: `
        <div>
          <input
            v-for="(item, index) in value"
            :key="index"
            v-model="value[index]"
            @input="$emit('input', value)"
          />
        </div>
      `,
    },
  },
};
</script>

使用`.sync`修饰符

Vue的.sync修饰符可以用于父子组件之间的双向绑定，适用于数组：

vue实现数组双向绑定

<template>
  <div>
    <child-component :items.sync="items" />
    <p>Items: {{ items }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'],
    };
  },
  components: {
    'child-component': {
      props: ['items'],
      methods: {
        updateItem(index, value) {
          this.$emit('update:items', [
            ...this.items.slice(0, index),
            value,
            ...this.items.slice(index + 1),
          ]);
        },
      },
      template: `
        <div>
          <input
            v-for="(item, index) in items"
            :key="index"
            :value="item"
            @input="updateItem(index, $event.target.value)"
          />
        </div>
      `,
    },
  },
};
</script>

使用`Vuex`实现全局状态管理

如果需要在多个组件之间共享数组状态，可以使用Vuex：

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    items: ['Item 1', 'Item 2', 'Item 3'],
  },
  mutations: {
    updateItem(state, { index, value }) {
      state.items.splice(index, 1, value);
    },
  },
});

在组件中使用：

<template>
  <div>
    <input
      v-for="(item, index) in items"
      :key="index"
      :value="item"
      @input="updateItem({ index, value: $event.target.value })"
    />
    <p>Items: {{ items }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['items']),
  },
  methods: {
    ...mapMutations(['updateItem']),
  },
};
</script>