답변:
자식 구성 요소를 제공 ref하고 사용하십시오$refs 대한 메서드를 직접 호출하는 데 합니다.
html :
<div id="app">
<child-component ref="childComponent"></child-component>
<button @click="click">Click</button>
</div>자바 스크립트 :
var ChildComponent = {
template: '<div>{{value}}</div>',
data: function () {
return {
value: 0
};
},
methods: {
setValue: function(value) {
this.value = value;
}
}
}
new Vue({
el: '#app',
components: {
'child-component': ChildComponent
},
methods: {
click: function() {
this.$refs.childComponent.setValue(2.0);
}
}
})ref 을 만드는 대신 사용 하는 이유 는 값을보고 부모의 다른 기능으로 방출합니까? 할 일이 많지만 ref안전한 것을 사용 하고 있습니까? 감사합니다
ref안전합니다. 일반적으로 Vue 커뮤니티는 상태를 어린이에게 전달하고 이벤트를 부모에게 전달하는 것을 선호하기 때문에 권장하지 않습니다. 일반적으로, 이것은보다 고립되고 내부적으로 일관성있는 구성 요소 (good thing ™)로 이어집니다. 그러나 자녀에게 전달하는 정보가 실제로 이벤트 (또는 명령) 인 경우 상태 수정이 올바른 패턴이 아닙니다. 이 경우 a를 사용하여 메소드를 호출하면 ref완전히 괜찮으며 충돌하지 않습니다.
당신이 설명하는 것은 부모의 상태 변화입니다. 당신은 소품을 통해 아이에게 전달합니다. 당신이 제안한대로, 당신은 watch그 소품 을 것 입니다. 자식이 조치를 취하면을 통해 부모에게 알리고 emit부모는 다시 상태를 변경할 수 있습니다.
실제로 어린이에게 이벤트를 전달하려면 버스 (Vue 인스턴스 일뿐)를 만들고이를 자식으로 소품으로 전달하면됩니다 .
v-model구성 요소에 속기를 사용하면 적은 코드로 해당 이벤트를 생성하여 값을 쉽게 재설정 할 수도 있습니다.
prop합니다. 자식에서 여분의 속성 data을 만들고에 속성 을 추가 한 다음 추가해야합니다 watch... 어떻게 부모에서 자식으로 이벤트를 전송하는 기본 지원이 있다면 편안합니다. 이 상황은 자주 발생합니다.
$emit및 을 사용할 수 있습니다 $on. @RoyJ 코드 사용 :
html :
<div id="app">
<my-component></my-component>
<button @click="click">Click</button>
</div>자바 스크립트 :
var Child = {
template: '<div>{{value}}</div>',
data: function () {
return {
value: 0
};
},
methods: {
setValue: function(value) {
this.value = value;
}
},
created: function() {
this.$parent.$on('update', this.setValue);
}
}
new Vue({
el: '#app',
components: {
'my-component': Child
},
methods: {
click: function() {
this.$emit('update', 7);
}
}
})시간이 있으면 Vuex 스토어를 사용하여 변수 (일명 상태)를 보거나 작업을 직접 트리거 (일명 디스패치)하십시오.
동안 아이에서 바인딩을 사용 하는 이벤트 버스 접근 방식이 마음에 들지 않았습니다 . 왜? 후속 통화 (사용중인$oncreatecreatevue-router )은 메시지 처리기를 두 번 이상 바인딩하여 메시지 당 여러 응답을 유발합니다.
소품을 부모에서 자녀에게 전달하고 재산 감시자를 자녀에게 배치하는 정통 솔루션은 조금 더 효과적이었습니다. 문제는 아동이 가치 전환에만 행동 할 수 있다는 것입니다. 동일한 메시지를 여러 번 전달하면 전환을 강제하기 위해 일종의 부기 관리가 필요하므로 자녀가 변경 사항을 선택할 수 있습니다.
배열에서 메시지를 줄 바꿈하면 값이 동일하더라도 자식 감시자를 트리거합니다.
부모의:
{
data: function() {
msgChild: null,
},
methods: {
mMessageDoIt: function() {
this.msgChild = ['doIt'];
}
}
...
}아이:
{
props: ['msgChild'],
watch: {
'msgChild': function(arMsg) {
console.log(arMsg[0]);
}
}
}HTML :
<parent>
<child v-bind="{ 'msgChild': msgChild }"></child>
</parent>자식 구성 요소에서 메서드를 호출하는 간단한 분리 방법은 자식에서 처리기를 생성 한 다음 부모에서 호출하는 것입니다.
var Child = {
template: '<div>{{value}}</div>',
data: function () {
return {
value: 0
};
},
methods: {
setValue(value) {
this.value = value;
}
},
created() {
this.$emit('handler', this.setValue);
}
}
new Vue({
el: '#app',
components: {
'my-component': Child
},
methods: {
setValueHandler(fn) {
this.setter = fn
},
click() {
this.setter(70)
}
}
})<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
<my-component @handler="setValueHandler"></my-component>
<button @click="click">Click</button>
</div>부모는 자식 핸들러 함수를 추적하고 필요할 때마다 호출합니다.
아래 예제는 자체 설명입니다. 여기서 refs와 이벤트는 부모와 자식에서 함수를 호출하는 데 사용될 수 있습니다.
// PARENT
<template>
<parent>
<child
@onChange="childCallBack"
ref="childRef"
:data="moduleData"
/>
<button @click="callChild">Call Method in child</button>
</parent>
</template>
<script>
export default {
methods: {
callChild() {
this.$refs.childRef.childMethod('Hi from parent');
},
childCallBack(message) {
console.log('message from child', message);
}
}
};
</script>
// CHILD
<template>
<child>
<button @click="callParent">Call Parent</button>
</child>
</template>
<script>
export default {
methods: {
callParent() {
this.$emit('onChange', 'hi from child');
},
childMethod(message) {
console.log('message from parent', message);
}
}
}
</script>부모가 자녀의 방법을 사용해야 할 필요성에 대해 고려해야한다고 생각합니다. 사실 부모는 자녀의 방법에 신경 쓸 필요가 없지만 자식 구성 요소를 FSA (유한 상태 기계)로 취급 할 수 있습니다. 하위 구성 요소의 상태를 제어하기 위해 상태 변경을 보거나 계산 기능을 사용하는 솔루션이면 충분합니다.