사용자 정의 이벤트
https://ryuzuka.github.io/VUE/tutorial/09_customEvent.html
$on(eventName) 이벤트 감지
$emit(eventName) 이벤트 트리거
부모 컴포넌트는 자식 컴포넌트가 사용되는 템플릿에서 직접 v-on 을 사용하여 자식 컴포넌트에서 보내진 이벤트를 청취할 수 있다.
<custom-event v-on:custom-event="customEvent"></custom-event>
.native
컴포넌트의 루트 엘리먼트에서 네이티브 이벤트를 수신할 수 있다.
<custom-event v-on:click.native="nativeEvent"></custom-event>
.sync
자식 컴포넌트가 .sync를 가지는 속성을 변경하면 값의 변경이 부모에 반영 된다. 편리하지만 단방향 데이터 흐름이 아니기 때문에 컴포넌트의 데이터 관리가 어려워 진다. 그러나 재사용 가능한 컴포넌트를 만들 때 유용할 수 있다.
부모 상태에 영향을 미치는 코드를 더욱 일관적이고 명백하게 만들어야 한다.
<sync :data.sync="data"></sync>
this.$emit( 'update:data', ... );
컴포넌트에 v-model을 정의하면 props에서 'value' 로 사용할 수 있다.
<div id="app">
<v-model-component v-model="modelData"></v-model-component>
</div>
Vue.component( 'v-model-component', {
props: ['value'],
template: '<input type="text" :value="value" @input="validate">'
});
new Vue({
el: '#app',
data: {
modelData: '...'
}
});