이벤트 발생 Emit

<div id="app">
    <app-contents v-on:이벤트이름="상위 컴포넌트의 메서드 이름"></app-contents>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>

var appContents = {
    template : `
        <p>
            <button v-on:click="sendEvent">갱신</button>
        </p>
    `,
    methods: {
        sendEvent() {
            this.$emit('refresh');
        }
    }
}

Vue.createApp({
    components : {
        'app-contents' : appContents
    }
}).mount('#app');
</script>

 

하위 컴포넌트의 이벤트를 발생시켜 상위컴포넌트로 이동시키는 것이 emit이다.

 

하위에서 쪽지를 주며 '뭐좀 실행시켜줘' 하는 것으로 받아들이면 편하다.

 

<div id="app">
    <app-contents v-on:refresh="showAlert"></app-contents>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>

var appContents = {
    template : `
        <p>
            <button v-on:click="sendEvent">갱신</button>
        </p>
    `,
    methods: {
        sendEvent() {
            this.$emit('refresh');
        }
    }
}
//루트 컴포넌트
Vue.createApp({
    methods: {
        showAlert() {
            alert('새로고침');
        }
    },
    components : {
        'app-contents' : appContents
    }
}).mount('#app');
</script>

 

이와 같이 아래의 emit을

v-on:emit이름="상위의 함수"를 사용하면 하위 컴포넌트에서 상위컴포넌트의 이벤트를

실행하도록 할 수 있다.