今天在写https://fileup.dev/imgtest 的时候遇到了个问题：

代码

明明我的子组件没有发送消息，为什么父组件数据同步了

<div class="dataBox dataDiv">
  <div v-for="(item, index) in filteredData" :key="index" :class="{ 'shadow dataContent': true, 'dataContentActive': initialData.includes(item) }" @click="selectItem(index, item)" :index="index">
   <span>{{ item.name }}</span>
  </div>
</div>

<button type="button" class="btn btn-primary" @click="$emit('selected-indexes', initialData)">对比</button>

这是一段会根据filteredData数据生成元素的代码，其中里面有一个点击事件

@click=”selectItem(index, item)

这个点击事件触发时会将当前的item参数，push到initialData这个数组里。

最下面的按钮是向父组件发送消息的，点击这个按钮就会向父组件发送initialData的数据

bug出现了

然后bug就出现了，只要我点击过一次button后，再去dataBox 里点那些div触发他们的点击事件。父组件的事件也同步更新了。

why？明明就没有点击按钮没有触发，发送消息的事件。只是在点击那些div为什么会这样？

解决办法

网络上查到的消息是：Vue.js的响应性行为有关。当使用$emit将initialData数组传递给父组件时，父组件接收到的是对同一个数组的引用，这时他们的数据就绑定在一起了，子组件改变父组件也改变。

所以只要让发送消息的数据和initialData 不等于，不等于，不等于就可以了

<button type="button" class="btn btn-primary" @click="sendSelectedIndexes">对比</button>

export default {
  data() {
    return {
      initialData: [],
    };
  },
  methods: {
    sendSelectedIndexes() {
      const initialDataCopy = [...this.initialData]; // 复制数组
      this.$emit('selected-indexes', initialDataCopy);
    },
  },
};