Vue.js props 속성

부모는 props 속성을 통해 자식에게 데이터를 전달한다

 

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할때 사용하는 속성이다.

 

https://kr.vuejs.org/v2/guide/components.html

 

1. 코드 형식

 

props 속성을 하위 컴포넌트에서 정의해서 거기에 부모 속성(데이터)를 넣어주는 형식이다.

 

    //상위 컴포넌트    <----- 이쪽방향으로 읽으면 편함  상위Data를 props 속성명에 넣는 과정
    <div id="app">
      <child-component v-bind:props 속성명="상위 컴포넌트 data속성"></child-component>
    </div>
   
	  //하위컴포넌트
      Vue.component('child-component', {
        props: ['props 속성명'],
        template: '<p>{{ props속성명 }}</p>',
      });

 

 

2. 코드 예시

 

    <div id="app">
      <child-component v-bind:son="parentMessage"></child-component>
    </div>

    <script>
      Vue.component('child-component', {
        props: ['son'],
        template: '<p>{{ son }}</p>',
      });

      new Vue({
        el: '#app',
        data: {
          parentMessage: '부모가 보내는 전달사항. 화이팅해라!'
        }
      });
    </script>


//결과 :  <p>부모가 보내는 전달사항. 화이팅해라!</p>