關於vue自定義事件中，傳遞參數的一點理解

例若有以下場景

<!-- 父組件 -->
<template>
  <div>
    <!--咱們想在這個dealName的方法中傳遞額外參數name -->
    <test-son v-for="item in list" @dealName="todo(item.name, arguments)" :item="item"></test-son>
  </div>
</template>

<script>
  export default {
    name: 'test-p',
    data() {
      return {
        list: [{
          name: '小王'
        }, {
          name: '小剛'
        }]
      }
    },
    methods: {
      todo(name, data) {
        console.log(name);
        console.log(data)
      }
    }
  }
</script>
<!-- 子組件 -->
<template>
  <div>
    <button @click="sendData">發射{{item.name}}</button>
  </div>
</template>

<script>
  export default {
    name: 'test-s',
    props: ['item'],
    methods: {
      sendData() {
        this.$emit('dealName', '王老吉');
      }
    }
  }
</script>

當咱們點擊子組件button的時候就會打印對應的  xxx, 王老吉

接下來分析一下上述代碼運做原理。
在vue官網上面有個在線模板編譯

當咱們給模板上的自定義事件添加額外參數的時候，咱們的綁定函數就會被包裹上一層代碼，function($event){xxx}
上述函數在子組件中emit的時候被調用，能夠理解爲 var dealName = function($event){xxx}
dealName.apply(vm, args);這其中因爲事件函數在初始化的時候就進行了bind，因此在函數中this指向的是父組件的實例，而args則是$emit中傳遞的參數，因此在父組件中模板中經過argumens能夠獲取全部子組件emit的參數