How to implement click method to pass parameters in uniapp

In Uniapp, we often need to trigger certain functions through click events, and often need to pass in some parameters in the function. In this case, we can use the click method to pass parameters. Next, this article will describe how to use this method in Uniapp.

1. How to use the click method to pass parameters

We first need to bind a click event in the page. In the callback function of this click event, the target function can be called by passing parameters. The sample code is as follows:

<template>
  <view>
    <button @tap="handleClick(1,&#39;hello&#39;)">按钮</button>
  </view>
</template>
<script>
export default {
  methods: {
    handleClick (num, str) {
      console.log(num, str)
    }
  }
}
</script>

In this example, we bind a tap event on the button through @click or @tap, etc., and then pass two parameters num and str, the console outputs the values ​​of these two parameters.

2. How to pass dynamic parameters

In fact, in our development, some requirements for passing parameters are dynamic. At this time, we need to pass parameters through variables. The sample code is as follows:

<template>
  <view>
    <button @tap="handleClick(num,str)">按钮</button>
  </view>
</template>
<script>
export default {
  data () {
    return {
      num: 1,
      str: 'hello'
    }
  },
  methods: {
    handleClick (num, str) {
      console.log(num, str)
    }
  }
}
</script>

In this example, we define two variables num and str in data, then pass these two variables in the tap event, and the console also outputs their values.

3. How to pass the event object

Sometimes, in the click method, we need to obtain the event object, such as the target, currentTarget and other attributes of the event. At this time, we also need to use the click method to pass the event object. . The sample code is as follows:

<template>
  <view>
    <button @tap="handleClick($event)">按钮</button>
  </view>
</template>
<script>
export default {
  methods: {
    handleClick (event) {
      console.log(event.target)
      console.log(event.currentTarget)
      console.log(event.type)
    }
  }
}
</script>

In this example, we pass the parameter $event in the tap event, which will carry all the information of the current event. Then we can get the event object through this parameter in handleClick, and Print out attributes such as target, currentTarget, type, etc.

4. Summary

The above are the methods and techniques for using the click method to pass parameters in Uniapp. We can call the target function through $event or directly pass parameters in the tap event, and also Dynamic parameters and event objects can be passed. This method is still relatively common in actual development. I hope everyone can apply it and improve development efficiency.

The above is the detailed content of How to implement click method to pass parameters in uniapp. For more information, please follow other related articles on the PHP Chinese website!