[ Vue ] emit 한줄로 사용하기 - @click.self

 

v-on:click.self

내부의 자식 요소들이 존재하는 경우 클릭된 요소가 해당 엘리먼트와 일치하는 경우에만 이벤트에 바인딩된 함수를 호출

이벤트 버블링 등의 간접적인 클릭 요소가 발생하여 함수 호출이 한 번이 아닌 다수가 일어나는 문제를 방지할 수 있다.
주의할 점은 클릭 영역에 자식 영역이 포함된 경우 당연히 함수가 동작하지 않는다

 

 

 상위컴포넌트  

 

아래의 에서 상위컴포넌트의 내용은 아래로 둘다 동일하다

(이벤트를 받는 상위 컴포넌트)

<template>
  <div>
	 <ParentComponent @close="closeModal"> </ParentComponent>
  <div>
</template>

<script>
export default {
data() {
    return {
      modal: false,
      // 저는 모달 닫는 버튼으로 사용하였으므로 이렇게 예시를 들었습니다 :)
    }
  },
  methods: {
    closeModal() {
        this.modal = false
      }
   }
}
</script>

 

 

 

 하위컴포넌트 

before

하위 컴포넌트에서 상위컴포넌트로 간단한 이벤트를 전달할때

기존에 작성했던 코드는 아래와 같다.

 

<template>
  <div>
  	<button @click="closeButton">취소</button>
  <div>
</template>

<script>
export default {
  methods: {
    closeButton() {
        this.$emit('close')
      }
    }
}
</script>

 

간단한 기능인데 저렇게 밖에 할 줄 몰라서 methods에 emit으로 이벤트를 올려 보내는 코드를 따로 작성해두었다

 

 

 

 하위컴포넌트 

after

하위 컴포넌트에서 상위컴포넌트로 간단한 이벤트를 전달할때

좀더 간단하게 emit을 올려보내는 방법은 아래와 같다

 

<template>
  <div>
  	<button @click.self="$emit('close')">취소</button>
  <div>
</template>

 

---

✔︎ 참고

webisfree.com/2018-12-04/[vuejs]-%ED%81%B4%EB%A6%AD-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%ED%8A%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%B0%8F-%EC%98%88%EC%A0%9C