emit의 목적

완강 후 개념들을 확실히 숙지하려고 코드, 문법, 메소드등을 직접 기록하면서

다시 강의를 보는 중입니다.

<body> <div id="app"> <p>{{num}}</p>  <app-header v-on:pass="logText"></app-header> <app-content v-on:increase="increaseNumber"></app-content> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appHeader = { template: '<button v-on:click="passEvent">click me</button>', methods: { passEvent: function() { this.$emit('pass'); } } }; var appContent = { template: '<button v-on:click="addNumber">add</button>', methods: { addNumber: function() { this.$emit('increase'); } } } var vm = new Vue({ el: '#app', components: { 'app-header': appHeader, 'app-content': appContent }, methods: { logText: function() { console.log('hi'); }, increaseNumber: function() { this.num = this.num + 1; } }, data: { num:10 } }); </script> </body>

위 코드에서 기능적인 메소드들은 상위컴포넌트 vm에

logText와 increaseNumber로 정의 되있으니 하위컴포넌트인

appHeader와 appContent가 없어도 문법만 맞추면 해당 기능들을 구현하는데는

문제가 없을거라고 느껴집니다.

그렇게 생각이 드니 여기서 emit의 기능은 이벤트의 이름을 정의해주는 것 같은데

emit을 활용하는 방법을 더 알고싶습니다,

이벤트의 이름을 정의하는 기능만 있다고 생각하면 뭔가 허전해서요

실제로 혹시 프로젝트에서 emit은 어떤 용도로 사용될까요?

인프런 커뮤니티 질문&답변