前言

用vue进行开发的过程中，我们常常会用到父子组件通信来支持我们的一些应用场景。在子组件中通过触发自定义事件，并向上层组件传递一定的参数（暂且称为事件参数），但有时候我们也想要在父组件向监听函数传入一定的参数（暂且称为自定义参数）。

比如在同一页面内需要重复使用相同的组件，并且具有事件传参时，我们希望能够传入自定义参数对两个组件进行区别。而这时候就起了冲突，如果传入了自定义参数，那事件无法正确绑定，参数将无法接收到。似乎碰到了一个鱼和熊掌不可兼得的情况。

举例

父组件: page.vue

<template>  <div>    <c-component @event_name="eventHandler"/>    <c-component @event_name="eventHandler"/>    <c-component @event_name="eventHandler"/>  </div></template><script>  import Component from '...'  export default {    name: 'page',    component: {      'c-component': Component    },    data: function() {      return {        params: [1, 2, 3]      }    },    methods: {      eventHandler(params) {        console.log(params)      }    }  }</script>

子组件: Component.vue

<template>  <div>    ...  </div></template><script>  export default {    name: 'component',    created() {      this.$emit('event_name', 4)    }  }</script>

情况1：正常情况下我们都希望接收到子组件传入的参数，eventHandler将正确地打印出4，但却无法区分是哪个组件触发的事件；

@event_name="eventHandler" // 4@event_name="eventHandler" // 4@event_name="eventHandler" // 4

情况2：而如果分别传入了参数，eventHandler方法分别打印的是123，但在父组件页面渲染时就已经执行，而不是事件发生时。

@event_name="eventHandler(params[0])" //1@event_name="eventHandler(params[1])" //2@event_name="eventHandler(params[2])" //3

浅析

为什么上面两种情况分别有不同的结果？我们需要先弄明白这些代码究竟是在干什么，两种情况分别是什么流程。
给事件传入eventHandler和eventHandler()有什么区别？
当我们在控制台环境，或者Node环境定义好一个函数（如eventHandler）之后，直接输入eventHandler并回车执行，你得到的反馈是一个函数定义。

let eventHandler = function(){    return 'something'}evnetHandler/* 输出：ƒ (){    return 'something'}*/

而输入eventHandler()表示我们需要执行这个函数，并获得到这个函数的返回值。

evnetHandler() //输出："something"

这个非常简单的道理换个地方有时候却会让人迷惑。

解决方案

通过返回一个闭包函数，闭包函数可以访问到定义时所在上下文的变量，即这里接收的自定义参数paramsComstumed，也可以被传入到所需要的地方进行接收事件参数paramsEvent。

以前了解到闭包函数的时候还在想，这个闭包函数到底有什么用。当它作为返回值时，闭包函数就开始大放异彩了。

eventHandler(paramsComstumed) {  return paramsEvent => {    console.log(paramsComstumed, paramsEvent)  }}

其他应用

我们通过闭包函数找到了同时接收vue父子组件参数的办法，但同时这种手段并不局限于这种应用场景。目前想到的类似的应用：

给vuex中的getters传参

//store.js:export default new Vuex.Store({  state: {    param: 1  },  getters: {    getStateParam: state => {      return paramReceived => {        console.log(state.param, paramReceived)      }    }  }})//page.vue:created() {  console.log(this.$store.getters.getStateParam(2)) //将输出1 2}

给computed传参

<template>  <div id="app">    <div>{{computer(1)}}</div> <!-- 标题1 -->    <div>{{computer(2)}}</div> <!-- 标题2 -->  </div></template><script>export default {  name: 'App',  data() {    return {      title: '标题'    }  },  computed: {    computer() {      return param => {        return this.title + param      }    }  }}</script>

在模块语法上的应用

//functions.jslet func = function (param1){  return function (param2) {    console.log(param1, param2)  }}module.exports = func(1)//process.jslet func = require('./test.js')func(2) //将输出 1 2