Vue.js 를 개발하며 궁금했던 것들

1. kebab-case? CamelCase?

HTML 어트리뷰트는 대소문자 구분이 없기 때문에 브라우저는 대문자를 소문자로 변경하여 읽습니다. 그렇기 때문에 카멜 케이스(대소문자 혼용)로 prop의 이름을 정한 경우에 DOM 템플릿 안에서는 케밥 케이스(하이픈으로-연결된-구조)를 사용하여야 올바르게 동작합니다.

Vue.component('blog-post', {
  // JavaScript에서의 camelCase
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- HTML에서의 kebab-case -->
<blog-post post-title="hello!"></blog-post>
물론, 문자열 템플릿을 사용하는 경우에는 무관합니다.

https://kr.vuejs.org/v2/guide/components-props.html#Prop-%EB%8C%80%EC%86%8C%EB%AC%B8%EC%9E%90-%EA%B5%AC%EB%B6%84-camelCase-vs-kebab-case

2. 비 부모-자식간 통신

때로는 두 컴포넌트가 서로 통신 할 필요가 있지만 서로 부모/자식이 아닐 수도 있습니다. 간단한 시나리오에서는 비어있는 Vue 인스턴스를 중앙 이벤트 버스로 사용할 수 있습니다.

var bus = new Vue()

// 컴포넌트 A의 메소드
bus.$emit('id-selected', 1)

// 컴포넌트 B의 created 훅
bus.$on('id-selected', function (id) {
  // ...
})

혹은 root 를 이용해서 루트 컴포넌트나 부모 컴포넌트에 이벤트를 만들어주면 된다.

this.$root.on("id-selected", method);
this.$root.emit("id-selected");

this.$parent.on("id-selected", method);
this.$parent.emit("id-selected");

https://kr.vuejs.org/v2/guide/components.html#%EB%B9%84-%EB%B6%80%EB%AA%A8-%EC%9E%90%EC%8B%9D%EA%B0%84-%ED%86%B5%EC%8B%A0