props를 이용해 데이터 통신하기

부모 컴포넌트가 가진 데이터를 자식 컴포넌트에 공유해 줘야할 경우,

자식 컴포넌트 태그에 데이터를 바인딩 해서 전달해주고, 자식 컴포넌트에서는 props를 통해 부모의 데이터를 받는다.

//상위 컴포넌트에서

<자식컴포넌트1 v-bind:propsData="propsData"></자식컴포넌트1>
<자식컴포넌트2 :selected="selected"></자식컴포넌트2>
...
export default{
    data(){
        return{
             propsData,
             selected: { date: null, time: null },
        };    
    }
}

 

//자식컴포넌트1
props:{
  propsData:데이터타입,    
}

//자식컴포넌트2
props: {
변수명: { type: Object, required: true }//required: true는 꼭 넘겨받아야 하는 데이터인지 설정  
},