$syslog는 내부 악리에서 부모에게 메시지를 내보내지 않습니다.

$syslog는 내부 악리에서 부모에게 메시지를 내보내지 않습니다.

나는 서버에서 데이터를 가져오는 것을 담당하는 자성분 방식을 가지고 있으며, 데이터를 받은 후 부모에게 데이터를 내보내려고 합니다.다음 메서드는 Vue.component(자)에서 가져온 것입니다.문제는 부모 컴포넌트가 내보낸 데이터를 수신할 수 없다는 것입니다.확인차 $emit 코드를 악시오스 요청 호출 외부로 이동시켰더니 작동 중입니다.악시오 내부에서 $emit을 사용해도 동작하지 않습니다.

동작하지 않음(악리 내부에서 송신):

methods:{
    methodName: function(){
        let self = this;
        axios.get('url')
        .then(function(response){
            if (response.data.res) {
                console.log('response is true, i can see this message');
                self.$emit('updateparentdata',response.data);
            }
        });
        self.$emit('close');
    }
},

작업 중(외부 악시오에서 전송):

methods:{
    methodName: function(){
        let self = this;
        self.$emit('updateparentdata','some dummy data');
        axios.get('url')
        .then(function(response){
            if (response.data.res) {

            }
        });
        self.$emit('close');
    }
},

이것은 html 페이지에 있는 내 컴포넌트 코드입니다.업데이트 parent data에서 무언가가 내보내지면 부모 vue에서 'updateData' 함수를 호출합니다.

<modal 
    v-if="showModal"
    @close="showModal = false"
    v-on:updateparentdata="updateData">
</modal>

이게 부모 vue에서의 내 방식이야

updateData: function(response){
    console.log(response);
},

이 메서드는 자 컴포넌트에서 데이터를 내보낸 후 트리거되지 않습니다.만약 내가 데이터를 공리 밖으로 내보낸다면, 이 메서드를 호출하지만, 만약 내가 공리 안에서 데이터를 내보낸다면 이 메서드를 호출하지 않는다.

답변 감사합니다.

문제가 뭔지 알아냈어요. 악시 콜 밖에서 $emit('close') 함수를 호출하고 있었어요.

axios 호출은 비동기적이기 때문에 요청을 한 후 axios 인스턴스 외부에 있는 $emit('close')는 실제로 내 modal 창을 닫고 전체 컴포넌트 인스턴스를 제거합니다.

그렇기 때문에 악시오스 호출 내의 이 $emit('updateparentdata') 함수는 예상대로 실행되지 않았습니다.

해결책 1:

$emit('close') in axios request를 이동했기 때문에 답변을 받은 후 modal 창을 닫습니다.

methods:{
    methodName: function(){
        let self = this;
        axios.get('url')
        .then(function(response){
            if (response.data.res) {
                console.log('response is true, i can see this message');
                self.$emit('updateparentdata',response.data);
                self.$emit('close');
            }
        });
    }
},

해결책 2:

@Matija Jupanchii에서 언급했듯이 Vue.nextTick을 사용하여 업데이트를 기다렸습니다.이 방법도 효과가 있었다.

Vue.nextTick을 사용하여 업데이트를 기다립니다.

악리 안에서 다음을 시험해 보십시오.

this.$nextTick(() => {
  self.$emit('close');
});

@RubanrajRavichandran이 솔루션 1에서 언급한 바와 같이 다음과 같습니다.self = this왜냐하면 공리에서는 이게 바뀌기 때문이죠.대신 다음과 같은 화살표 기능을 사용할 수 있습니다..then((response) => {}그리고.this사용할 수 있기 때문에 사용할 필요가 없습니다.self

언급URL : https://stackoverflow.com/questions/44189500/emit-is-not-emitting-the-message-to-parent-from-inside-axios