vue组件通信，通过闭包函数在父组件中向自定义事件传参

前言

用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"

因为上例情况2中的evnetHandler并没有返回值，所以监听事件实际上没有绑定任何东西。这个非常简单的道理换个地方有时候却会让人迷惑。

解决方案

通过返回一个闭包函数，闭包函数可以访问到定义时所在上下文的变量，即这里接收的自定义参数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.js
let func = function (param1){
  return function (param2) {
    console.log(param1, param2)
  }
}
module.exports = func(1)

//process.js
let func = require('./test.js')
func(2) //将输出 1 2

本文由哈喽比特于4年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/U0qxSmr9m9PBnnN--8zEuQ