复现步骤:
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中判断则不会有该问题。
