[Vue.js] Vue 자기 자신에게만 이벤트 핸들러 실행하기

<template>
  <div>
    <!-- 예제 1: 부모 엘리먼트를 클릭하면 핸들러가 실행됩니다. -->
    <div @click.self="doThat">
      부모 엘리먼트를 클릭하세요
      <button>자식 버튼</button>
    </div>

    <!-- 예제 2: 자식 엘리먼트를 클릭하면 핸들러가 실행되지 않습니다. -->
    <div @click.self="doThat">
      <button>자식 버튼</button>
    </div>

    <!-- 예제 3: 다른 자식 엘리먼트를 클릭하더라도 핸들러가 실행되지 않습니다. -->
    <div @click.self="doThat">
      <input type="text" />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    // 이벤트 핸들러입니다. 부모 엘리먼트를 클릭하면 실행됩니다.
    doThat() {
      console.log('doThat 메서드가 호출됨');
    },
  },
};
</script>

Vue에서는 이벤트 핸들러에 .self 수식어를 사용하여 자기 자신에게만 이벤트 핸들러를 실행할 수 있습니다. 이를 통해 부모 엘리먼트의 이벤트가 자식 엘리먼트로 전파되는 것을 방지할 수 있습니다.

1. 예제 1: 부모 엘리먼트를 클릭하면 핸들러가 실행됩니다. 이때 자식 엘리먼트인 버튼을 클릭하더라도 핸들러가 실행되지 않습니다.

2. 예제 2: 자식 엘리먼트를 클릭하면 핸들러가 실행되지 않습니다. .self 수식어를 사용했기 때문에 자기 자신에게만 이벤트 핸들러가 실행됩니다.

3. 예제 3: 다른 자식 엘리먼트를 클릭하더라도 핸들러가 실행되지 않습니다. .self 수식어를 사용하여 이벤트가 자기 자신에게만 적용되도록 설정했습니다.

Vue의 .self 수식어를 사용하면 특정 엘리먼트에만 이벤트 핸들러가 적용되도록 제어할 수 있습니다. 이를 통해 원하는 동작을 보다 정확하게 제어할 수 있습니다.