vue Study - event (child to Parent)

 event (child to Parent) : primitive type의 경우 자식에서 변경하여도 부모에서는 변경이 안되므로 이벤트를 통해 전체가 변경되도록 한다.

child에서 수정 시 event를 통해 parent에게 전달하고 parent는 이벤트를 수신하면 listen한다.

변경하는 이벤트를 수신하였을 때 parent의 데이터가 변경되고 -> 새롭게 변경된 데이터를 props를 통해 다른 컴포넌트에 전달된다.

 

데이터가 변경되면 루트 컴포넌트에서 자식컴포넌트들을 다시 렌더링함 업데이트 된 데이터를 props를 통해 전달

this.$emit('changeTitle','Vue Wizards');

emit을 하여 자식컴포넌트에서 루트로 이벤트를 보내면  루트컴포넌트에서 listen함 - 이벤트와 함께 보내는 문자열로 바뀜

 <app-header v-bind:title="title v-on:changeTitle="updateTitle($event)"></app-header>

methods:{

    updateTitle:function(updatedTitle){

    this.title=updatedTitle; //updatedTitle은 전달받은 string인자 ( 'vue wizards')

    }

}