[vue.js] 맨날 까먹는 props와 emit으로 컴포넌트 간에 값 전달하기

props 사용법

공식문서 참고 이미지

공식 문서

props는 상위 컴포넌트의 데이터를 하위컴포넌트로 전달할 때 사용합니다.

props로 받을 때에는 camel 표기법을 사용해선 안됩니다. 대신, kebab 표기법(xx-xx)을 사용합니다.

<컴포넌트 v-bind:하위컴포넌트="상위컴포넌트 data요소"></컴포넌트>

 

emit 사용법

emit을 사용할 때, 이벤트 이름이나 메소드 이름도 props와 마찬가지로 camel 표기법을 사용해선 안됩니다.

대신, kebab 표기법(xx-xx)을 사용합니다.

공식 문서에 따르면, 다음과 같이 나와있습니다.

컴포넌트 및 props와는 다르게 이벤트 이름은 자바스크립트 변수나 속성의 이름으로 사용되는 경우가 없으며, 따라서 camelCase나 PascalCase를 사용할 필요가 없습니다. 또한, (HTML의 대소문자 구분을 위해) DOM 템플릿의 v-on 이벤트리스너는 항상 자동으로 소문자 변환되기 때문에 v-on:myEvent 는 자동으로 v-on:myevent로 변환됩니다. – 즉, myEvent 이벤트를 들을 수 없습니다.

이러한 이유 때문에, 이벤트 이름에는 kebab-case를 사용하는것이 권장됩니다.

<컴포넌트 v-on:하위컴포넌트에 이벤트="상위컴포넌트 methods요소"></컴포넌트>

emit은 하위컴포넌트의 동작으로 상위컴포넌트의 메서드를 실행시킬 때 사용합니다.

 

아래의 예시는 하위컴포넌트의 데이터를 함께 emit으로 상위 컴포넌트에 전달하는 동작을 하는 코드를 작성해 보았습니다.

 

상위컴포넌트

하위 컴포넌트로부터 emit되는 메서드 명은 kebab-case로 작성해야 합니다.

물론, methods는 camelCase로 작성합니다.

<template>
  <하위컴포넌트 @check-it="checkIt"></하위컴포넌트>
</template>

<script>
import '하위컴포넌트' from './하위컴포넌트.vue'
export default {
  components : {
    하위컴포넌트
  },
  methods : {
    checkIt : function (text) {
      alert(text);
    },
  }
}
</script>

하위컴포넌트

this.$emit()안에 들어갈 메소드 이름은 camelCase가 아닌 kebab-case로 작성해야 합니다.

물론, methods는 camelCase로 작성합니다.

<template>
  <input type="button" @onclick="checkIt()"></상위컴포넌트>
</template>

<script>
export default {
  methods : {
    checkIt : function () {
      let text = '상위컴포넌트로 전달할 데이터'
      this.$emit(check-it, text)
    },
  }
}
</script>

 

 

결국에는, props나 emit을 사용하는 변수이름이나 이벤트 이름은 kebab-case를 사용해야 합니다.