Vue props (kebab-case, camelCase)

Camel case

문자열의 첫 문자를 제외하고 단어의 첫 글자마다 대문자로 표현

Kebab case

소문자만 사용하며, 단어 사이를 대시(-)로 구분

HTML의 속성은 대소문자를 구별하지 않으므로, Vue에서 컴포넌트를 전달할때 사용하는 props를 주의해야 함

Javascript에서 camel case를 사용하면

      let appContent = {
        template: "<div>{{ propsData }}</div>",
        props: ["propsData"],
      };

      new Vue({
        el: "#app",
        components: {
          "app-content": appContent,
        },
        data: {
          num: 10,
        },
      });

HTML에서 받을 땐 kebab case를 사용해야 함

    <div id="app">
      <app-content v-bind:props-data="num"></app-content>
    </div>