Closed
Description
uni-app 转 微信小程序
自定义组件的自定义方法 调用函数组装多参数问题。
额外参数为 父组件上绑定的数据是没有问题的,在如v-for :for-item 参数才会有问题
问题描述
一个自定义组件:
父组件调用自定义组件(CheckableTag):
执行,打印输出:
true
undefined
参数option 没有传过来,查看编译结果:
option
参数指向错误。
怀疑是@change="(checked) => handleChange(checked, option)"
语句箭头函数的原因,
改为:@change="function (checked) { handleChange(checked, option) }"
handleChange 方法输出结果:
undefined
{label: "10km内", value: "10km"}
参数checked
又不存在了,十分不解,各种调试之后发现只要在 handleChange(checked, option)
随便加一条或多条语句就正常了,如:
这样达到想要的结果,两个参数都传过来了。
查看编译结果发现,这里多条语句与单条语句的编译结果是不一样的:
单语句:
// TagSelect.wxml
<checkable-tag vue-id="{{'230ddefb-1-'+__i0__}}" checked="{{option.value===selected.value}}" data-event-opts="{{[['^change',[['handleChange',['$0','$1'],['checked',[['options','value',option.value]]]]]]]}}" bind:change="__e" class="data-v-e4f6e12a" bind:__l="__l" vue-slots="{{['default']}}">{{option.label}}</checkable-tag>
多语句:
// TagSelect.wxml
<checkable-tag vue-id="{{'230ddefb-1-'+__i0__}}" checked="{{option.value===selected.value}}" data-event-opts="{{[['^change',[['e0']]]]}}" data-event-params="{{({option})}}" bind:change="__e" class="data-v-e4f6e12a" bind:__l="__l" vue-slots="{{['default']}}">{{option.label}}</checkable-tag>
// TagSelect.js
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
if (!_vm._isMounted) {
_vm.e0 = function(checked, option) {
var _temp = arguments[arguments.length - 1].currentTarget.dataset,
_temp2 = _temp.eventParams || _temp["event-params"],
option = _temp2.option
var _temp, _temp2
123
_vm.handleChange(checked, option)
}
}
}
多语句与箭头函数形式的写法类似都会提取成单独的方法来调用。
系统信息:
- 发行平台: 微信小程序
- 操作系统 windows10
- HBuilderX版本 2.8.11.20200907
- uni-app版本
- 设备信息 最新版【微信开发者工具】
补充信息
代码编译可能存在问题