关于wepy 组件事件绑定不成功问题
发布于 7 年前 作者 haojun 3364 次浏览 来自 问答
在用wepy做一个定制礼品电商小程序，要用到多个九宫格的设计，这是index
 

下面是tags
 

在index四宫格点击酒类进行tags类别为酒的六宫格，再点击cellitem就进入商品详情
于是用组件化解决重复代码问题，中间遇到一个问题，半天还想不通:目录结构

Page  -----
   index.wpy
   tags.wpy
Component -----
   cell.wpy
   cellitem.wpy

通过index 调用 cell 组件（每两个cell为一组），cell组件调用cellitem组件（渲染每个cell）
下面是index的数据：

    • 0:Array(2)

    • 0:{created: "2018-03-01 16:25:11", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=p8sg1j7u", name: "服装", alias: "p8sg1j7u", id: 100409681, …}

    • 1:{created: "2018-03-01 16:25:03", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=gu5m0ecf", name: "皮具", alias: "gu5m0ecf", id: 100409676, …}

    • length:2

  •   1:Array(2)

    •   0:{created: "2018-03-01 16:23:51", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=pji4p3l6", name: "鲜花", alias: "pji4p3l6", id: 100409642, …}

    •   1:{created: "2018-03-01 16:23:36", share_url: "https://shop40630714.youzan.com/v2/showcase/tag?alias=5jtnwmnh", name: "酒", alias: "5jtnwmnh", id: 100409638, …}

    • length:2


tages页面的数据也是类似的，两两元组组成二维数组，外层cell遍历一维，cellitem遍历二维
tags.wpy   与  index.wpy  代码一样 (祖宗)

    <view class="page-section">
      <cell :cellList.sync="cellList"></cell>
    </view>


这是cell.wpy（父组件）的相关代码
<repeat for="{{cellList}}" index="index" item="twocellitem">
    <view class="flex-wrp">
      <cellitem :twocell.sync="twocellitem"></cellitem>      
    </view>
  </repeat>

下面是cellitem.wpy（子组件）的相关代码
<repeat for="{{twocell}}" index="index" item="onecellitem">
          <view class="flex-item" [@tap](/user/tap)="{{onecellitem.page}}tap" data-id="{{onecellitem.id}}" data-name="{{onecellitem.name}}">
      <view class="page-section-ctn">
        <image class="image" src="{{onecellitem.imgsrc}}"/>
      </view>
      <view class="item-name">{{onecellitem.name}}</view>
    </view>
</repeat>


数据加载是没问题的，但事件绑定上有问题，从index点击【酒】分类的[@tap](/user/tap)是可以的，但进入tags后点击【item商品】[@tap](/user/tap)没反应






后来找文档，也按要求改了：


原生小程序支持的js [color=var(--theme-color,#42b983)]模块化，但彼此独立，业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。

例如模板阿中绑定一个bindtap="myclick"，模板乙中同样绑定一样bindtap="myclick"，那么就会影响同一个页面事件。对于数据同样如此。因此，只有通过改变变量或者事件方法，或者给其加不同前缀才能实现绑定不同事件或者不同数据。【我用的是“给其加不同前缀”】当页面复杂之后就十分不利于开发维护。

因此，在WePY中实现了小程序的组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离，上述例子在WePY的组件化开发过程中，A组件只会影响到阿所绑定的myclick，B也如此。

这是cellitem.wpy  的 事件绑定部分：

  methods = {

      indextap(e){

        console.log('cellitem组件去往tags页面事件：',e)

        wepy.navigateTo({

          url: '../pages/tags?id=' + e.currentTarget.dataset.id + '&name=' + e.currentTarget.dataset.name

        })

      },

      tagstap(e){

        console.log('cellitem组件去往item页面事件：',e)

        wepy.navigateTo({

          url: '../pages/item?id=' + e.currentTarget.dataset.id + '&name=' + e.currentTarget.dataset.name

        })

      }

    }  // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明

请问：这个BUG从哪里可找到原因，我没头绪，求救，求教！

回到顶部