扣丁书屋

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

用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

https://mp.weixin.qq.com/s/U0qxSmr9m9PBnnN--8zEuQ

最多阅读

html <table>表数据转 Json 格式 2年以前  |  2487次阅读
使用 Vue 3.0,你可能不再需要Vuex了 1年以前  |  1421次阅读
element中input的change事件 1年以前  |  1253次阅读
Vue表单支持回车键自动提交 1年以前  |  1244次阅读
2020 Vue经典面试题 1年以前  |  1177次阅读
VS Code 配置与插件推荐 2019 年版 1年以前  |  1140次阅读
koa2入门使用总结 1年以前  |  1131次阅读
Vue如何实现疫情地图展示 1年以前  |  1108次阅读

手机扫码阅读