taro ui vue 的 Atinput组件,onchang事件被覆盖的问题



  • 在使用vue3 + Taro ui vue的组件库进行开发小程序时,出现了绑定组件的事件被覆盖的情况
    复现步骤如下:

    1.有两个小程序界面,A界面中有两个AtInput组件; B界面有一个AtInput组件;onChange事件分别绑定了不同方法,
    2.在A页面进入B页面,在B页面填写完信息后,用Taro.navigateBack方法,返回A页面,继续填写内容。此时,发现A界面onchange事件绑定的方法失效,触发的是B页面的onchange事件绑定的方法
    3.复现截图:
    82b9d339-9c44-45df-a940-79547371da98-image.png ![d1a2073e-d9ab-4c7d-afb8-41be8c0cd317-image.png]
    159fc363-7260-4221-981c-ac9d049925fa-image.png
    以下是对应的代码

    // A界面的组件及方法
                <AtInput
                  type='number'
                  placeholder='请输入总建筑面积'
                  :value="formData.houseArea"
                  :onChange="changeHouseArea"
                />
     // 绑定的方法
      const changeHouseArea = function(e) {
         console.info('changeHouseArea', e)
         formData.houseArea = e
      }
    
    // B页面组件及绑定方法
    <AtInput
                  type='text'
                  placeholder='请输入详细地址'
                  :value="inputAddress"
                  :onChange="addressChange"
                />
    
    const addressChange = (e) => {
        console.info('addressChange', e)
        inputAddress.value = e
      }
    

    从以上的表现来看,个人觉得是事件被覆盖了,不知道是否理解对


登录后回复