뷰 컴포넌트 props와 event 예제

 

1
thumb

 

1
props와 event

 

Vue 컴포넌트가 부모 - 자식의 관계로 형성되어있을 때 각 컴포넌트 내부의 데이터는 캡슐화되기 때문에 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달하기 위해서는 속성(props)을 이용해야 한다. (부모에서 자식으로 단방향으로만 전달 가능, 반대로 자식에서 부모는 이벤트를 이용)

 

 

1
props와 event 예제

SearchContactComponent (부모) 

    ↓

    SearchComponent (자식) 

    ContactlistComponent(자식)

 

1
props와 event 예제

 

 

1. SearchComponent(자식)가 입력값을 받아서 SearchContactComponent(부모)한테 전달

 

2. Search-Contact-Component(부모)가 검색 기능을 수행

 

3. contactlist-component(자식)가 v-bind:contacts="contactList"를 실행하여 자신의 속성인 contactList에 결과 값을 넘겨받고 화면에 렌더링

 

 

 

See the Pen [Vue.js] props 와 event 예제 by junheeleeme (@junheeleeme) on CodePen.

 

검색 결과는 CodePan에서 렌더링이 안됨 

 

 

 

컴포넌트 data 옵션에 function() 들어가고 return에는 '{}' 중괄호를 사용해야한다.

 

ex)

data : function(){
            return { 
                contactList : [],
                isProcessing : false
             }
        }
저작자표시