왜 click 이벤트를 인지 못하나요?

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

jjkim0222

작성한 질문수

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

event emit으로 콘솔 출력하기

작성

650

app-header에 v-on:click="logText"를 추가하면 콘솔창에 'hi'가 두번 찍힐거라 예상했는데 hi가 한번밖에 안 찍히네요. 실험해보니까 app-header에서 this.$emit으로 전달한 pass이벤트만 인지되고 있고 click이벤트는 무시되고 있는 거 같은데 이유가 뭔가요?

<body>
  <div id="app">
    <app-header v-on:click="logText" v-on:pass="logText"></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');
        }
      }
    }

    var vm = new Vue({
      el: '#app',
      components: {
        'app-header': appHeader,
      },
      methods: {
        logText: function() {
          console.log('hi');
        }
      },
    });
  </script>
</body>

event javascript this.$emit vuejs

퀴즈

43%나 틀려요. 한번 도전해보세요!

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

코드의 양을 늘리기 위해

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

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

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

답변 1