Emit

이벤트 자체를 하위 컴포넌트에 넘길 수 있다.

예를 들어

 

<template>

  <MyBtnComponent @click="log">aaa</MyBtnComponent>

</template>

<script>

import MyBtnComponent from './components/MyBtnComponent.vue';

export default{

  components:{

    MyBtnComponent

  },

  methods:{

    log(){

      console.log("Clicked.");

    }

  }

}

이렇게 상위컴포넌트에서 MyBtnComponent에게 클릭이벤트를 추가시켰다.

 

근데 MyBtnComponent에서

<template>

  <div class="btn">

    <h1 @click="$emit('click')">click event</h1>

  </div>

  

</template>

<script>

export default{

  emits:[

    'click'

  ]

}

</script>

저렇게 emits의 'click' 이벤트를 받아 놓으면,

그러니까.. 상위 컴포넌트의 클릭이벤트 log가 콜백함수로 전달 된 거다.

 

그 다음, h1에 클릭이벤트로 그 받은 emit의 클릭 이벤트를 실행하도록 한거다.

 

그러니까, 상위컴포넌트인 클릭이벤트 log()가

하위 컴포넌트 emit의 'click' 에 넘어간 것이다. (물론 기존 클릭 이벤트도 같이 발동 된다.)

 

참고로,

 

<template>

  <div class="btn">

    <slot></slot>

  </div>

  <h1 @click="$emit('click')">click event</h1>

</template>

<script>

export default{

}

그냥 이렇게 해도 똑같이 그렇게 됨.

꼭 스크립트에

emits 해서 명시해 놓을 필요는 없음.

 

그냥 $emit('click') 해도 클릭이벤트 구나 하고 알아들음.

 

단, 이것보다 더 놀라운 점은,

커스텀 이벤트.

 

예를 들어,

<template>

  <MyBtnComponent class="asdf" @parentEvt="parentLog">zcxbxzcbxcz</MyBtnComponent>

</template>

<script>

import MyBtnComponent from './components/MyBtnComponent.vue';

export default{

  components:{

    MyBtnComponent

  },

  methods:{

    parentLog(){

      console.log("parentEvt");

    }

  }

}

</script>

저렇게 @커스텀이벤트이름=메소드 넘겨주고

 

<template>

  <div class="btn">

    <h1 @click="$emit('parentEvt')">click event1</h1>

    <h2>no click event</h2>

  </div>

</template>

<script>

export default {

}

</script>

이렇게 그냥 자식에서 $emit('부모로부터받은커스텀이벤트이름') 하면 된다.