[Vue CLI] props_작성중

 

 

props 대소문자 구분

HTML속성은 대소문자를 구별하지 않고 모든 대문자를 소문자로 인식하므로 Vue에서 HTML을 표현 할 때 보통 kebab-case(하이픈으로 표기)로 표현하고 javascript에서 prop을 받아 사용할 때는 camelCase(단어시작시대문자로표기)로 사용.

 

-HTML에서 prop을 사용할 때 대소문자 구분

<template>
  <div id="app">
    <!--[html] kebab-case 사용(O) -->
    <!--[html] kebab-case 사용(O) 단, 문자열("")은 제외 -->
    <props-ex-test v-bind:child-data="sendChildData"></props-ex-test>
    <!--[html] camelCase 사용(X) -->
    <props-ex-test v-bind:childData="sendChildData"></props-ex-test>
  </div>
</template>

 

-script에서 prop을 사용할 때 대소문자 구분

<template>
  <div>
    <!--[script] camelCase표기 (O) -->
    <h1>{{childData}}</h1>
    <!--[script]  kebab-case표기 (X) -->
    <h1>{{child-data}}</h1>
  </div>
</template>

<script>
export default {
  //[script] camelCase표기 (O) 
  props: ["childData"]
  //[script] kebab-case표기 (X) 
  props: ["childData"]
};

 

---

props 타입 테크와 유효성 검사

문자열 배열 형태로 구현

props: ["childData"]

유효성,타입 체크 등 오브젝트로 선언하여 구현

props: {
	childData:{
      type: String, 		 //String,Number,... 타입체크
      required: true, 		 //필수값 체크
      default: "defaultData" //props에 데이터 정의가 안된 경우 기본 정의될 데이터
      }
}

 

 

---

예시..

 

App.vue

<template>
  <div id="app">
    <props-ex-test v-bind:childData="sendChildData"></props-ex-test>
  </div>
</template>

<script>
import PropsExTest from "./components/PropsExTest.vue";
export default {
  data: function() {
    return {
      sendChildData: "sendChildData"
    };
  },
  components: {
    "props-ex-test": PropsExTest
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

 

PropsExTest.vue

<template>
  <div>
    <h1>{{childData}}</h1>
  </div>
</template>

<script>
export default {
  props: ["childData"]
};
</script>

<style>
</style>

 

 

 

참고 : 캡틴판교 님 인프런 강의