[Vue.js] Vue 인라인 핸들러에서 메서드 호출하기

<template>
  <div>
    <!-- 예제 1: 버튼을 클릭하면 메서드를 호출하고 사용자 지정 인자를 전달하는 예제 -->
    <button @click="handleClick('예제 1')">예제 1 실행</button>

    <!-- 예제 2: 다른 버튼을 클릭하면 메서드를 호출하고 사용자 지정 인자를 전달하는 예제 -->
    <button @click="handleClick('예제 2')">예제 2 실행</button>

    <!-- 예제 3: 텍스트 입력 후 엔터를 누르면 메서드를 호출하고 사용자 지정 인자를 전달하는 예제 -->
    <input type="text" @keyup.enter="handleKeyup('예제 3')" />
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(exampleName) {
      alert(`이 예제는 ${exampleName} 입니다.`);
    },
    handleKeyup(exampleName) {
      alert(`이 예제는 ${exampleName} 입니다.`);
    },
  },
};
</script>

Vue에서는 인라인 핸들러를 통해 메서드를 호출하고 사용자 지정 인자를 전달할 수 있습니다. 이를 통해 네이티브 이벤트 객체를 사용하지 않고도 원하는 로직을 구현할 수 있습니다.

1. 예제 1: 버튼을 클릭하면 handleClick 메서드가 호출되고, 메서드에 사용자 지정 인자 '예제 1'이 전달됩니다. 이를 활용하여 각 예제를 실행하는 로직을 구현할 수 있습니다.

2. 예제 2: 다른 버튼을 클릭하면 handleClick 메서드가 호출되고, 다른 사용자 지정 인자 '예제 2'가 전달됩니다. 이를 통해 여러 버튼을 클릭할 때마다 다른 동작을 수행할 수 있습니다.

3. 예제 3: 텍스트 입력 후 엔터를 누르면 handleKeyup 메서드가 호출되고, 사용자 지정 인자 '예제 3'이 전달됩니다. 이를 활용하여 엔터 키 입력에 반응하여 특정 동작을 수행할 수 있습니다.

이처럼 Vue의 인라인 핸들러를 활용하여 메서드를 호출하고 사용자 지정 인자를 전달함으로써 더욱 다양하고 유연한 이벤트 처리를 할 수 있습니다.