vue中的$emit参数浅谈

我会带着你远行 2023-10-11 11:41 78阅读 0赞

##### 正常使用 #####

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\}*。  
**用表格展示一下刚刚的讨论：**

<table> 
 <thead> 
  <tr> 
   <th>v-on</th> 
   <th>methods</th> 
   <th>参数结果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@showCityName=“updateCity”</td> 
   <td>updateCity(data)</td> 
   <td>data = 子组件传递过来的data</td> 
  </tr> 
  <tr> 
   <td>@showCityName=“updateCity(i)”</td> 
   <td>updateCity(data)</td> 
   <td>data = i</td> 
  </tr> 
  <tr> 
   <td>@showCityName=“updateCity(i)”</td> 
   <td>updateCity(index,data)</td> 
   <td>index= i,data = undefined</td> 
  </tr> 
  <tr> 
   <td>@showCityName=“updateCity(i)”</td> 
   <td>updateCity(…data)</td> 
   <td>data = {i}</td> 
  </tr> 
 </tbody> 
</table>

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

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

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