| 在用wepy做一个定制礼品电商小程序，要用到多个九宫格的设计，这是index 下面是tags 在index四宫格点击酒类进行tags类别为酒的六宫格，再点击cellitem就进入商品详情 于是用组件化解决重复代码问题，中间遇到一个问题，半天还想不通:目录结构 Page ----- index.wpy tags.wpy Component ----- cell.wpy cellitem.wpy 通过index 调用 cell 组件（每两个cell为一组），cell组件调用cellitem组件（渲染每个cell） 下面是index的数据：
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从哪里可找到原因，我没头绪，求救，求教！ |
相关问题