Vue3组件emit中能否获取v-for循环的multigate实例？

一、获取v-for循环中的multigate实例 #

完全可以，两种简单实现方式如下：

方式1：父组件绑定事件时传递multigate #

修改父组件的事件绑定逻辑，通过箭头函数把当前循环的multigate作为额外参数传入处理函数：

<li v-for="multigate in store.availableMultigates">
  <Multigate :multigate="multigate" @antennas="(connectedAntennas) => showAntennas(connectedAntennas, multigate)" />
</li>

对应的处理函数接收两个参数即可拿到multigate：

const showAntennas = (connectedAntennas, multigate) => {
  console.log(connectedAntennas);
  console.log(multigate); // 此处获取当前循环的multigate实例
}

方式2：子组件触发事件时携带multigate参数 #

子组件已通过props接收multigate，触发事件时直接将其作为第二个参数传出：

// 子组件内部代码
emit('antennas', connectedAntennas.value, multigate);

父组件处理函数直接接收两个参数：

const showAntennas = (connectedAntennas, multigate) => {
  console.log(connectedAntennas);
  console.log(multigate);
}

二、关于访问this #

分两种场景说明：

• Vue3组合式API（setup语法）：直接定义的showAntennas函数内没有this，因为setup执行时组件实例尚未完全初始化，this指向undefined。若需访问组件实例上下文，可使用getCurrentInstance()（注意这是Vue内部API，不推荐生产环境随意使用）：

  import { getCurrentInstance } from 'vue';
  
  const instance = getCurrentInstance();
  const showAntennas = (connectedAntennas) => {
    console.log(instance); // 此处获取组件实例，可替代this的部分功能
  }
  

• Vue选项式API：把showAntennas写在methods选项中，即可正常访问this（指向当前组件实例）：

  export default {
    methods: {
      showAntennas(connectedAntennas) {
        console.log(this); // 指向当前组件实例
      }
    }
  }
  

内容的提问来源于stack exchange，提问作者DuchSuvaa