Skip to content

自定义组件的自定义方法传多参数 #2132

Closed
@ctocto

Description

uni-app 转 微信小程序
自定义组件的自定义方法 调用函数组装多参数问题。
额外参数为 父组件上绑定的数据是没有问题的,在如v-for :for-item 参数才会有问题
问题描述
一个自定义组件:
image
父组件调用自定义组件(CheckableTag):
image
image
执行,打印输出:
true
undefined
参数option 没有传过来,查看编译结果:
image
option 参数指向错误。

怀疑是@change="(checked) => handleChange(checked, option)" 语句箭头函数的原因,
改为:@change="function (checked) { handleChange(checked, option) }" handleChange 方法输出结果:
undefined
{label: "10km内", value: "10km"}
参数checked 又不存在了,十分不解,各种调试之后发现只要在 handleChange(checked, option) 随便加一条或多条语句就正常了,如:
image
这样达到想要的结果,两个参数都传过来了。

查看编译结果发现,这里多条语句与单条语句的编译结果是不一样的:
单语句:

// 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版本
  • 设备信息 最新版【微信开发者工具】

补充信息
代码编译可能存在问题

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions