微信小程序View层向逻辑层传递数据——事件data-xxx

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 依然可以拿到参数。

详细参考：
微信小程序开发——事件