关于wepy 组件事件绑定不成功问题
在用wepy做一个定制礼品电商小程序,要用到多个九宫格的设计,这是index ignore_js_op style="word-wrap: break-word;"> [图片] /ignore_js_op> 下面是tags ignore_js_op style="word-wrap: break-word;"> [图片] /ignore_js_op> 在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="{{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是可以的,但进入tags后点击【item商品】@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从哪里可找到原因,我没头绪,求救,求教!