父组件如何分辨子组件中通过同一个事件通知的不同变量？

Question

在网上找了一个地址选择的组件，功能是选择国家省份城市，简略代码如下。我的问题是，这里在选择了国家、省份、城市时，都是使用 addressSelect 事件向父进程通信，那父进程怎么知道当前事件返回的数据是国家还是省份或者城市呢？我应该怎么使用这个组件：

1. 父组件通过 v-model 绑定 countryCode、provinceCode、cityCode 多个变量？不过我没找到怎么通过 v-model 通过绑定多个变量的方法
2. 把事件变成 3 个，比如 selectCountry、selectProvince、selectCity，便于父进程区分事件类型

谢谢！

<template>
  <div id="AddressSelect">
    <el-row>
      <el-col span="6">
        <el-select
          v-model="countryCode"
          @change="changeCountry"
          :placeholder="$t('国家')"
        >
          <el-option (省略)></el-option>
        </el-select>
      </el-col>
      <!-- 后面是省份、城市选择，代码省略 -->
    </el-row>
  </div>
</template>

<script>
export default {
  model: {
    event: 'addressSelect',
  },
  
  data() {
    return {
      countryCode: '', // 国家编码
      provinceCode: '', // 省份编码
      cityCode: '', // 城市编码
      // 省略
    };
  },
  
  methods: {
    changeCountry(val) {
      // 省略部分代码
      this.$emit('addressSelect', val);
    },
    changeProvince(val) {
      this.$emit('addressSelect', val);
    },
    changeCity(val) {
      this.$emit('addressSelect', val);
    },
  }
}
</script>

Answer 1

子组件通信的时候添加一个标识：
this.$emit('addressSelect', val, 'country')
父组件接收：

<child @addressSelect="addressSelect(arguments)" />
addressSelect(args) {
    console.log(args)
}

父组件通过args[0], args[1]拿到相应的参数

或者子组件传递一个对象，在对象中添加相应的标识:

this.$emit('addressSelect', {
    val,
    flag: 'country'
})