例如有如下场景
<!-- 父组件 --><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的参数
