正常使用

vue中的$emit常用与子组件与父组件通信，网上很多博客均已讨论该问题，在此就不多做记录了，直接复制一段过来：

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

例如：子组件：

<template>
  <div class="train-city">
    <h3>父组件传给子组件的toCity:{{sendData}}</h3> 
    <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
  </div>
</template>
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用来接收父组件传给子组件的数据
    methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件
      }
    }
  }
</script>

父组件：

<template>
    <div>
        <div>父组件的toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//触发子组件城市选择-选择城市的事件
        this.toCity = data.cityname;//改变了父组件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>

————————————————

版权声明：本文为CSDN博主「darkblueLove」的原创文章，遵循 CC 4.0 BY-SA
版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sllailcp/article/details/78595077

疑问

在使用过程中想到某种情况，即在父组件中调用子组件$emit的方法时，还要加上父组件的参数，该如何处理？
比如上面父组件中，@showCityName=“updateCity”，updateCity中自带有子组件中传递的参数；但是如果尝试添加一个来自父组件的参数（比如v-for中的index），写成@showCityName=“updateCity(i)”，methods中的updateCity(data)里发现，data = i。开始怀疑是漏掉了参数，于是把updateCity函数改写成updateCity(index,data)，测试发现，index = i，data = undefined，而改成updateCity(…data)，结果data = {i}。
用表格展示一下刚刚的讨论：

总之，令人困惑的就是，当把父组件参数传递进来时，子组件传递的参数不见了，似乎是被覆盖了！！！

本来准备去vue官网看看官方文档是否有这方面的解释，奈何发现vue官网这段时间在维护，只好在这里记录下来。
若有缘人看到，知道原因和解决方案，或者与本人又同样的疑问，请在评论区指点一二，感激不尽！

2019-11-29 更新
感谢评论区 @ nimapier 的兄弟帮我解决了这个问题，经过测试，参数形式写成updateCity($event,‘父组件参数’)，即可在$event里拿到子组件参数，需注意，$event务必写正确，不可随意用别的字符（如$e）代替，否则会报错。