同一页面使用多个高德的选址组件之间会相互影响

踩坑记录：同一页面使用多个高德选址组件的坑

---

问题简述

摘要：同一页面有多个选址组件，后续的选址会影响到前面的选址：

场景：页面有三个选址组件（A，B，C），A首先选择了“邢台”，B选择了“沙河”，此时A的地址也会变成“沙河”（此时A，B两个组件的地址都变成了“沙河”），然后C选择了“宁晋”，此时A，B，C的地址都会变成“宁晋”。

前提：之前的组件有值的情况才会别后续的组件所影响。

总结：同一页面的所有的选址组件都会以最后一个选址组件选择的地址为准，进行更换。

---

一、代码及效果展示

页面的代码

我当时的疑问：v-for循环的组件不是不会互相影响吗？

<div  
     v-for="(item, index) in dataList"
     :key="index">
    <MapChoice
      ref="chooseItem"
      :data="item"
      @changeShowArray="changeShowArray"
    />
</div>

问题出现部分的组件代码

getLocationMap() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        const iframeWrap = this.$refs.iframeWrap;
        const iframe = iframeWrap.contentWindow;
        iframeWrap.onload = function () {
          iframe.postMessage("maps", "https://m.amap.com/picker/");
        };
        window.addEventListener(
          "message",
          (e) => {
            console.log("选择列表e", e);
            this.value = e.data.address;
            this.dialogVisible = false;
            console.log("选择地址", this.value);
          },
          false
        );
      });
    },

疑问：v-for循环的组件不是不会相互影响吗？

页面展示

第一个选址组件选择地址

可以看到，组件正常使用：

第二个选址组件选择地址

问题出现了：第二个选址组件在选址玩后，发现打印了两遍“选址列表e”，同时第一个选址组件的地址也变成了第二个组件选择的。

再用其中一个选址组件选择一个地址

发现打印了三遍“选择地址e”。

二、问题排查

通过加log日志打印，发现每次点击选择地址后 window.addEventListener 这个函数执行的次数为：1+n（n为之前选址组件选择的地址次数，注意：同一个组件多次点击按多次计算）
所以可以肯定问题是因为window.addEventListener 函数的多次执行导致的。于是将window.addEventListener 函数，改为了window.onmessage函数，之后发现选址组件之间就不会相互影响了。

---

总结

1，使用v-for循环子组件如果传入的值不一样，那就不会相互影响，如果出现类似于上面所述的问题，那一定是某个函数影响导致的。
2，window.addEventListener函数会多次执行，window.onmessage函数只会执行一次。