现象描述
在快应用中采用如下js方式绑定组件的事件方法,同时传递事件对象和自定义参数会发现回调方法中没有正确接收到参数,如下所示:
问题代码:
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<input id="input1" type="button" value="跳转" onclick="jump(event,1)"/>
</div>
</template>
<script>
module.exports = {
jump: function (event, v) {
console.info("e = " + JSON.stringify(event));
console.info("v = " + v);
}
}
</script>
打印日志如下:
问题分析
事件回调支持的写法(其中{{}}可以省略):
- "fn":fn为事件回调函数名(在<script>中有对应的函数实现)。
- "fn(a,b)":函数参数例如a,b可以是常量,或者是在<script>的data中定义的变量(前面不用写this.)。
- "a+b":表达式,其中a,b数据类型与上面相同。
回调函数被调用时,会在参数列表末尾自动添加一个evt参数,通过evt参数访问回调事件相关上下文数据(数据内容具体参看组件回调事件说明),例如点击事件的点击位置x,y。
解决方案
修改代码如下:
<template>
<!-- Only one root node is allowed in template. -->
<div class="container">
<input id="input1" type="button" value="跳转" onclick="jump(1)" />
</div>
</template>
<script>
module.exports = {
jump: function (v, evt) {
console.info("e = " + JSON.stringify(evt));
console.info("v = " + v);
}
}
</script>
打印日志如下:
快应用事件绑定介绍:
{{o.name}}
{{m.name}}