Vue3中循环数组时更新绑定模型未同步修改原数组的问题咨询

你好呀～ 看了你的代码，问题其实出在两个容易忽略的细节上：一是父组件的更新方法既没接收子组件传过来的新值，也没去修改原数组对应的元素；二是因为你传递的是Number这种原始类型值，它是「值传递」而非「引用传递」，子组件拿到的只是原数组元素的副本，即便子组件修改副本也不会直接影响原数组（不过这里你用了emit通信，核心问题还是父组件没处理好更新逻辑）。

先拆解原代码的问题 #

1. 你的updateNumbers函数没有定义参数，子组件emit('update:number', 5)传过来的新值5根本没被接收到，自然没法用来更新数组
2. 你也没告诉父组件要更新数组的哪一个位置——v-for循环里每个元素对应不同的索引，必须明确更新位置才能精准修改原数组

解决办法（附完整修改代码） #

1. 父组件调整：传递索引+处理更新逻辑

先修改模板，在绑定事件时把当前元素的索引传给更新方法；再修改updateNumbers函数，接收新值和索引后更新数组对应位置：

<script>
import { defineComponent, ref } from 'vue'
import Test from './Test.vue'

export default defineComponent({
  name: 'app',
  components: {
    Test,
  },
  setup() {
    const numbers = ref([1, 2, 3]);

    // 新增参数：接收子组件传来的新值和对应索引
    const updateNumbers = (newVal, index) => {
      // 直接修改ref数组的对应索引元素，Vue3会自动触发响应式更新
      numbers.value[index] = newVal;
      console.log(numbers.value); // 现在就能看到更新后的数组啦
    };

    return {
      numbers,
      updateNumbers
    };
  },
});
</script>

<template>
  <test 
    v-for="(number, index) in numbers" 
    :key="`${index}-${number}`" 
    :number="number" 
    <!-- 绑定事件时把索引和子组件传的新值一起传给更新方法 -->
    @update:number="(newVal) => updateNumbers(newVal, index)"
  ></test>
</template>

2. 子组件无需改动（保持原逻辑即可）

子组件的emit通信逻辑是正确的，不需要修改：

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'test',
  props: {
    number: {
      default: () => 0,
      required: true,
      type: Number,
    },
  },
  emits: ['update:number'],
  setup(props, { emit }) {
    const updateNumber = () => {
      emit('update:number', 5);
    };

    return {
      updateNumber
    };
  },
});
</script>

<template>
  <div @click="updateNumber">click {{ number }}</div>
</template>

补充说明 #

现在点击子组件的元素，原数组就能正常更新了——这也是Vue父子组件通信的标准方式：子组件不直接修改父组件的状态，而是通过事件通知父组件自行修改，既符合单向数据流的设计原则，也避开了原始类型值传递的限制。

备注：内容来源于stack exchange，提问作者Pete