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

강프로그래머

작성한 질문수

Vue.js 시작하기 - Age of Vue.js

event emit

버튼을 클릭해도 event가 발생하지 않습니다.

작성

303

수정됨

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header></app-header>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var appHeader = {
            // template: '<button>click me</button>'
            template: '<button v-on:click="passEvent">click me</button>',
            methods: {
                passEvent: function() {
                    this.$emit('pass');
                }
            }
        }

        new Vue({
            el: '#app',
            components: {
                'app-header': appHeader
            }
        });
    </script>
</body>
</html>

javascript vue.js

퀴즈

컴포넌트 간에 명확한 통신 규칙이 필요한 주된 이유는 무엇일까요?

코드의 양을 늘리기 위해

복잡한 데이터 관계와 버그 추적의 어려움을 피하기 위해

특정 개발 패턴을 강제하기 위해

컴포넌트의 스타일을 개선하기 위해

답변 1

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 강프로그래머님.

버튼 클릭 시 이벤트가 발생하지 않는 문제에 대해 고민하고 계시군요. 유사한 문제를 다룬 몇 가지 해결책을 공유해드리겠습니다.

App-header click event does not trigger: 이 질문에서 click 이벤트와 커스텀 이벤트가 동시에 작동하지 않는 경우에 대해 설명하고 있습니다. template을 올바르게 정의하고, 컴포넌트에서 click 이벤트와 커스텀 이벤트를 사용하고 있는지 확인해보세요.
Root 컴포넌트에서 undefined로 받습니다: 이 질문에서는 이벤트가 상위 컴포넌트를 통해 전달되지 않는 문제를 다룹니다. 이벤트 리스너를 제대로 설정하고 컴포넌트 간의 데이터 전달을 확인해보세요.
Emit의 목적과 활용: 이 게시물에서는 $emit의 목적과 실전 활용에 대해 설명하고 있으며, 이벤트가 기대대로 작동하지 않는 경우를 해결하는 팁들도 포함되어 있습니다.

참고로, 기본적인 구조와 작동 원리는 이와 같습니다:

하위 컴포넌트에서 이벤트를 this.$emit('eventName')을 통해 발생시킵니다.
상위 컴포넌트에서 v-on:eventName="methodName" 형태로 핸들러를 지정하여 이벤트를 처리합니다.

예제 코드에서 this.$emit('pass')가 발생했을 때 상위 컴포넌트에서 대응하는 핸들러가 없기 때문에 이벤트 처리가 되지 않는 것 같습니다.

업데이트된 예제 코드를 확인해 보시기 바랍니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header v-on:pass="handlePass"></app-header>
    </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');
                }
            }
        }

        new Vue({
            el: '#app',
            components: {
                'app-header': appHeader
            },
            methods: {
                handlePass: function() {
                    console.log('Event received');
                }
            }
        });
    </script>
</body>
</html>

이 업데이트된 예제는 pass 이벤트가 발생했을 때 상위 컴포넌트의 handlePass 메서드가 호출되도록 설정하였습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

강프로그래머

작성한 질문수

전체 Q&A

질문하기