收藏
回答

相同自定义组件多次使用时properties在事件处理中被混淆

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug properties 工具 开发者工具 2.32.3

复现步骤:

1. 创建一个自定义组件
2. 在页面中使用两次该组件,传入不同的properties
3. 在组件的WXML中直接使用properties作为渲染条件
4. 在组件的事件处理函数中访问this.properties
5. 观察到访问到的是另一个组件的properties


示例代码:

(这里common-input是自定义的输入框组件,这边针对组件输入了不同的传参)

<common-input
  id="addFieldInput"
  title="字段名称"
  maskOpacity="0.2"
  inputType="text"
  btnText="确认"
  defaultValue="{{curAddField.name || ''}}"
  showMask
  placeholder="请输入字段名称"
  bind:confirm="__onConfirmFieldName" />
<common-input
  id="unitInput"
  title="单位描述"
  maskOpacity="0.2"
  inputType="text"
  btnText="确认"
  isAllowEmpty="{{true}}"
  defaultValue="{{curAddField.unit || ''}}"
  showMask
  placeholder="请输入单位(如有),最多5个字"
  bind:confirm="__onConfirmFieldUnit" />


后续通过获取对应id展示对应输入框,如:

 // 获取 #addFieldInput 组件实例,并通过内部方法toggleStatus 展示对应输入框
 const addFieldInput = this.selectComponent('#addFieldInput')
 addFieldInput.toggleStatus(true)


在对应的 wxml 代码中,按钮点击的状态用到了 `isAllowEmpty` 参数作为渲染条件,在这种情况下,__onClickBtn 响应回调里面拿到的 properties却是

#unitInput 实例的 properties

<view wx:if="{{title}}" class="input-header">
  <text class="cancel-btn" catchtap="__closeInput">取消</text>
  <text class="title-text">{{title}}</text>
  <text 
    class="confirm-btn{{inputValue.length > 0 || isAllowEmpty ? ' active' : ''}}" 
    catchtap="__onClickBtn">
     {{btnText}}
  </text>
</view>


另:如果wxml中移除 isAllowEmpty或者在展示输入框时同时将该值另存一份到data,后续用data中的值在wxml中判断则不会有该问题。

回答关注问题邀请回答
收藏

1 个回答

  • 智能回答 智能回答 本次回答由AI生成
    2025-12-02
    有用
登录 后发表内容