vue 事件调用 传参_关于vue自定义事件中，传递参数的一点理解

例如有如下场景

export default {

name: 'test-p',

data() {

return {

list: [{

name: '小王'

}, {

name: '小刚'

}]

}

},

methods: {

todo(name, data) {

console.log(name);

console.log(data)

}

}

}

发射{{item.name}}

export default {

name: 'test-s',

props: ['item'],

methods: {

sendData() {

this.$emit('dealName', '王老吉');

}

}

}

当我们点击子组件button的时候就会打印对应的 xxx, 王老吉

接下来分析一下上述代码运作原理。

在vue官网上面有个在线模板编译

当我们给模板上的自定义事件添加额外参数的时候，我们的绑定函数就会被包裹上一层代码，function($event){xxx}

上述函数在子组件中emit的时候被调用，可以理解为 var dealName = function($event){xxx}

dealName.apply(vm, args);这其中由于事件函数在初始化的时候就进行了bind，所以在函数中this指向的是父组件的实例，而args则是$emit中传递的参数，所以在父组件中模板中通过argumens可以获取所有子组件emit的参数