psaren / taro-ui-vue

UI KIT for Taro/vue
MIT License
206 stars 38 forks source link

Vue版本的部分组件事件触发时机bug,只支持方法名,不支持方法名(参数)进行调用 #91

Closed Li-saltair closed 3 years ago

Li-saltair commented 3 years ago

问题描述 Vue版本的Taro UI组件 AtList和AtlistItem中的click事件无法添加参数进行调用,如果在事件名称中添加了参数会导致进入该页面被立刻调用,只有使用方法名称字符串的形式才可以在被点击的时候正确调用,不可以添加括号(参数)的形式调用。 依赖信息

  "dependencies": {
    "@babel/runtime": "^7.7.7",
    "@tarojs/components": "3.0.14",
    "@tarojs/runtime": "3.0.14",
    "@tarojs/taro": "3.0.14",
    "taro-ui-vue": "^1.0.0-alpha.13",
    "vue": "^2.5.0",
    "vue-template-compiler": "^2.5.0"
  },

复现步骤 以下代码在调用时,只有第一个会在点击时调用; 其他的在进入页面时无需点击就会直接执行。

<AtList>
      <AtListItem
          title="我的商城"
          arrow="right"
          :onClick="fastClick"
      />
      <AtListItem
          title="分销记录"
          arrow="right"
         :onClick="fastClick('/pages/user/distribution-records')"
      />
      <AtListItem
          title="提现记录"
          arrow="right"
          :onClick="fastClick('/pages/user/withdraw-records')"
      />
      <AtListItem
          title="常见问题"
          arrow="right"
          :onClick="fastClick('/pages/user/questions')"
      />
</AtList>
fastClick() {
  console.log('点击了')
},

期望行为 期望事件触发按照Vue官方文档使用$emit的形式进行触发(v-on:事件名【可以缩写成@事件名】)而不是使用数据绑定(v-bind)的形式进行,使用数据绑定的形式,无法在事件名后面添加调用该方法的参数,因为会加载后立刻执行。

报错信息 上方代码所属页面加载完成后,未进行任何操作,执行后结果如下 image

系统信息

Taro 版本 [v3.0.14]
Taro UI 版本 ["taro-ui-vue": "^1.0.0-alpha.13"]
报错平台 [微信小程序]

补充信息 个人认为原因是由于没有使用$emit的形式触发事件才出现的这个问题

psaren commented 3 years ago

可以使用 下面两种方式传递参数

 <AtListItem
        title="分销记录"
        arrow="right"
        :onClick="() => fastClick('/pages/user/distribution-records')"
    />
 <AtListItem
        title="分销记录"
        arrow="right"
        :onClick="fastClick.bind(this, '/pages/user/distribution-records')"
    />