文章列表页跳文章详情页的时候，我发现了一个问题，bindtap绑定的事件不能直接写：bindtap=jumpToArticle(item.id);
这样写不行，会报错：
VM2760:1 Component "pages/index/index" does not have a method "jumpToArticle(item.id)" to handle event "tap".
那么我需要传参怎么办呢，官方是这样定义的。
bindtap只是写明函数名，例如，bindtap='setNumber',而不是bindtap='setNumber(1)',在js中只要写function(e).通过e可以获取所传过来元素的所有信息。
大概是如下图所示的样子：
图片描述
图片描述
上代码：
Index.wxml
`<view id=``"article"` `data-id=``"{{item.id}}"` `bindtap=``"jumpToArticle"``>点击view>`
Index.js
`jumpToArticle:``function``(event){`
`console.log(event);`
`},`
Event打印结果：
`{`
`"type"``:``"tap"``,`
`"timeStamp"``:895,`
`/////////////////////////////////`
`"target"``: {`
`"id"``: "article”,`
`"dataset"``: {`
`"``id``”:458`
`}`
`},`
`"currentTarget"``: {`
`"id"``: "article”,`
`"dataset"``: {`
`"id:”458"`
`}`
`},`
`///////////////////////////////`
`"detail"``: {`
`"x"``:53,`
`"y"``:14`
`},`
`"touches"``:[{`
`"identifier"``:0,`
`"pageX"``:53,`
`"pageY"``:14,`
`"clientX"``:53,`
`"clientY"``:14`
`}],`
`"changedTouches"``:[{`
`"identifier"``:0,`
`"pageX"``:53,`
`"pageY"``:14,`
`"clientX"``:53,`
`"clientY"``:14`
`}]`
注意两点：
1：data-名称 不能有大写字母，如果需要，可以通过 - （中划线）来连接单词，编译的时候小程序会将第二个单词首字母自动大写。图中代码是为了自己标志，所以第二个单词的首字母大写了，其实可以不用。data- 属性中不可以存放对象。*
2：注意打印结果中target和currentTarget的区别。
target 触发事件的源组件。
currentTarget 事件绑定的当前组件。
如果你在父容器上绑定了事件并传参，当你点击父容器时，事件绑定的组件和触发事件的源组件是同一个元素，所以currentTarget 、target 都可以拿到参数，但是当你点击子元素时，target 就不是事件绑定的组件了，所以拿不到参数。
由于事件冒泡的机制，父容器上绑定的事件依然可以触发，所以currentTarget 依然可以拿到参数。
有好的建议，请在下方输入你的评论。
网友评论