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 事件时传递一个包含多个属性的对象

回答:

具体代码没看到,但如果你是这样注册的:

 Vue.component("slideDown", {
    template:"<div>son</div>"
})

那么在html里面,最好是这样的:

 <slide-down></slide-down>
 #或者
 <slidedown></slidedown>

因为浏览器DOM解析上,会把大写自动转小写。谷歌起码是这样。

如果html里是 <slideDown></slideDown>这样调用,谷歌报这样的错(亲测):

[Vue warn]: Unknown custom element: <slidedown> - did you register the component         correctly? For recursive components, make sure to provide the "name" option. (found in root instance)

补充,Vue是支持回调函数是一个闭包的。没有看到你浏览器报的错误,所以不好下什么结论。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注