uniapp에서 매개변수를 전달하기 위해 클릭 메소드를 구현하는 방법

Uniapp에서는 클릭 이벤트를 통해 특정 기능을 실행해야 하는 경우가 많고, 함수의 일부 매개변수를 전달해야 하는 경우도 많습니다. 이 경우 click 메소드를 사용하여 매개변수를 전달할 수 있습니다. 다음으로 이 글에서는 Uniapp에서 이 방법을 사용하는 방법을 설명합니다.

1. 클릭 메서드를 사용하여 매개변수를 전달하는 방법

먼저 페이지의 클릭 이벤트를 바인딩해야 합니다. 이 클릭 이벤트의 콜백 함수에서 매개변수를 전달하여 대상 함수를 호출할 수 있습니다. 샘플 코드는 다음과 같습니다.

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

이 예에서는 @click 또는 @tap 등을 통해 버튼의 탭 이벤트를 바인딩한 다음 콜백 함수인 handlerClick에 두 개의 매개변수 num 및 str을 전달하고 콘솔 출력을 전달합니다. 이 두 매개변수의 값.

2. 동적 매개변수 전달 방법

실제로 우리 개발에서는 매개변수 전달에 대한 일부 요구사항이 이 때 변수를 통해 매개변수를 전달해야 합니다. 샘플 코드는 다음과 같습니다.

<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>

이 예에서는 데이터에 두 개의 변수 num 및 str을 정의한 다음 이 두 변수를 탭 이벤트에 전달하고 콘솔도 해당 값을 출력합니다.

3. 이벤트 개체를 전달하는 방법

때때로 클릭 메서드에서 대상, 현재 대상 및 기타 이벤트 속성과 같은 이벤트 개체를 가져와야 하는 경우도 있습니다. 이벤트 객체를 전달하는 click 메소드입니다. 샘플 코드는 다음과 같습니다.

<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>

이 예에서는 $event 매개변수를 탭 이벤트에 전달합니다. 이 매개변수는 현재 이벤트의 모든 정보를 전달합니다. 그런 다음 handlerClick에서 이 매개변수를 통해 이벤트 개체를 가져오고 인쇄할 수 있습니다. currentTarget 및 type과 같은 속성을 대상으로 합니다.

4. 요약

위는 Uniapp에서 click 메소드를 사용하여 $event를 통해 타겟 함수를 호출하거나 탭 이벤트에서 직접 매개변수를 전달하는 방법 및 기법입니다. 그리고 이벤트 객체. 이 방법은 실제 개발에서는 여전히 비교적 일반적입니다. 모두가 이를 적용하여 개발 효율성을 높일 수 있기를 바랍니다.

위 내용은 uniapp에서 매개변수를 전달하기 위해 클릭 메소드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!