Symptom
In the quick application, the following js method is used to bind the event method of the component, and when the event object and custom parameters are passed at the same time, it will be found that the parameters are not correctly received in the callback method, as shown below:
Problem code:
<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>The print log is as follows:
problem analysis
The writing method supported by the event callback (where {{}} can be omitted):
- "fn": fn is the name of the event callback function (there is a corresponding function implementation in <script>).
- "fn(a,b)": function parameters such as a, b can be constants, or variables defined in the data of <script> (do not write this. before).
- "a+b": Expression, where a, b data types are the same as above.
When the callback function is called, an evt parameter is automatically added at the end of the parameter list, and the context data related to the callback event is accessed through the evt parameter (for details of the data content, please refer to the description of the component callback event), such as the click position x, y of the click event.
solution
Modify the code as follows:
<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>The print log is as follows:
Quick application event binding introduction: