Vue 패턴이 props
위아래로 움직 events
입니다. 간단하게 들리지만 사용자 컴포넌트를 작성할 때 잊어 버리기 쉽습니다.
Vue 2.2.0부터 v-model을 사용할 수 있습니다 ( 계산 된 속성 포함 ). 이 조합은 구성 요소 사이에 간단하고 깨끗하며 일관된 인터페이스를 만듭니다.
props
구성 요소에 전달 된 모든 항목 은 반응 상태로 유지됩니다 (즉, watch
변경 사항이 감지 될 때 복제되지 않았거나 로컬 복사본을 업데이트하는 기능이 필요하지 않습니다 ).
- 변경 사항은 자동으로 부모에게 전달됩니다.
- 여러 레벨의 구성 요소와 함께 사용할 수 있습니다.
계산 된 속성을 사용하면 setter와 getter를 별도로 정의 할 수 있습니다. 이를 통해 Task
컴포넌트를 다음과 같이 다시 작성할 수 있습니다.
Vue.component('Task', {
template: '#task-template',
props: ['list'],
model: {
prop: 'list',
event: 'listchange'
},
computed: {
listLocal: {
get: function() {
return this.list
},
set: function(value) {
this.$emit('listchange', value)
}
}
}
})
모델 프로퍼티 정의 prop
와 연관된 v-model
및 이벤트의 변경에 출사한다. 그런 다음 다음과 같이 부모에서이 구성 요소를 호출 할 수 있습니다.
<Task v-model="parentList"></Task>
listLocal
계산 재산권 부품 내에 간단하고 게터 세터 인터페이스를 제공한다 (전용 가변되는 것처럼 생각). 내에서 #task-template
렌더링 할 수 listLocal
있으며 반응 상태를 유지합니다 (즉, parentList
변경하면 Task
구성 요소 가 업데이트 됩니다). listLocal
setter (예 :) 를 호출하여 음소거 할 수 this.listLocal = newList
있으며 변경 사항이 부모에게 전달됩니다.
이 패턴의 장점 listLocal
은 Task
(의 v-model
) 하위 구성 요소에 전달할 수 있으며 하위 구성 요소의 변경 사항이 최상위 구성 요소로 전파된다는 것입니다.
예를 들어, EditTask
작업 데이터를 수정하기위한 별도의 구성 요소가 있다고 가정합니다. 동일 v-model
하고 계산 된 속성 패턴 을 사용하여을 사용하여 listLocal
구성 요소에 전달할 수 있습니다 v-model
.
<script type="text/x-template" id="task-template">
<div>
<EditTask v-model="listLocal"></EditTask>
</div>
</script>
만약 EditTask
이 방출이 적절하게 호출 변화 set()
에 listLocal
최고 수준에 이벤트를 전파함으로써합니다. 마찬가지로 EditTask
구성 요소는을 사용하여 다른 자식 구성 요소 (예 : 양식 요소)를 호출 할 수도 있습니다 v-model
.