javascript - Vue.js为什么不支持 回调函数“函数式编程”？

问题描述

问 题

子组件向父组件传值，为了增加回调函数的复用性，事件绑定采用函数式编程，但是总是不能正确调用实例方法返回的函数：

  <slideDown
    :choosestyle="chooseStyle"
    :useroptions="useroptions1"
    @changeSubData="receiveData(prodMoneyOff)"
    ></slideDown>

    data () {
    message: {
        prodMoneyOff: ''
    }
    },
    methods: {
         receiveData (item) {
          let _self = this
          console.log(`选择的item是${item}`)
          return function (val) {
            console.log(`传递的值是 ${val}`)
            _self.message[item] = val
          }
        }
    }
  

解决方案

Vue 2 对模板是先编译成 render function 再进行渲染的，当你这样写的时候，Vue 编译器会认为你写的是一个内联语句，因此会按内联语句的方式进行编译，因此返回函数的函数调用在这里无效。

Vue 1 估计也不行，因为，同样也会认为是内联语句。

解决方法，既然 Vue 将绑定的事件作为内联语句处理了，那么可以使用内联语句 receiveData(prodMoneyOff)($event) 来达到想要的结果。

若需要处理多个参数，需要注意在子组件中 $emit 事件时传递一个包含多个属性的对象

这篇关于javascript - Vue.js为什么不支持 回调函数“函数式编程”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！