1.微信小程序View层向逻辑层传递数据
1.什么是事件
1.事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。
2.事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
。3.事件对象可以携带额外信息,如 id, dataset, touches。
2.传递单个传参:id
- Wxml:view层
<view id= "line" bindtap="gotoPage" data-page = "line" class="mt20 list-item">Line</view>
- JS:逻辑层
gotoPage: function(e) {
var page = e.event.currentTarget.id;
console.log("page:" + page);
wx.navigateTo({
url: '../'+packages +'/'+ page + '/' + page
});
},
- 输出
page:line
3.传递多个传参:data-
- Wxml:view层
<view bindtap="gotoPage" data-page="index" data-packages ="wrong-topic" class="list-item">WrongTopic</view>
- JS:逻辑层
gotoPage: function(e) {
console.log("page:" + page);
var page = e.currentTarget.dataset.page;
var packages = e.currentTarget.dataset.packages;
console.log("page:" + page);
console.log("packages:" + packages);
wx.navigateTo({
url: '../'+packages +'/'+ page + '/' + page
});
},
- 输出
page:index
packages:wrong-topic
- 注意
1、data-名称 不能有大写字母,如果需要,可以通过 - (中划线)来连接单词,编译的时候小程序会将第二个单词首字母自动大写。图中代码是为了自己标志,所以第二个单词的首字母大写了,其实可以不用。data-* 属性中不可以存放对象。
2.package是保留关键字,不能作为变量使用
4.currentTarget和target的区别
target 触发事件的源组件。
currentTarget 事件绑定的当前组件。
如果你在父容器上绑定了事件并传参,当你点击父容器时,事件绑定的组件和触发事件的源组件是同一个元素,所以currentTarget 、target 都可以拿到参数,但是当你点击子元素时,target 就不是事件绑定的组件了,所以拿不到参数。
由于事件冒泡的机制,父容器上绑定的事件依然可以触发,所以currentTarget 依然可以拿到参数。
详细参考:
微信小程序开发——事件