Question

我在子组件中有一个方法，负责从服务器获取数据，在接收数据后，我试图将数据发送到父级。以下方法来自Vue.component（child）。问题是，父组件无法接收发出的数据。只是为了检查，我将$ emit代码移到axios请求调用之外，然后它正在工作。如果i $从axios内部发出，它就无法正常工作。

不工作（从axios内部发射）：

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');
    }
},

工作（从外部axios发射）：

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页面中的组件代码，如果从updateparentdata发出一些内容，那么它将调用＆＃39; updateData＆＃39;父母的功能。

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

这是我父亲的方法，

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

从子组件发出数据后，不会触发此方法。如果我在axios之外发出数据，则调用此方法，但如果我从axios内部发出数据，则不会调用此方法。

Answer 1

感谢您的回答。

我发现问题是什么，我在axios调用之外调用$ emit（'close'）函数。

由于axios调用是异步的，在发出请求之后，axios实例外的$ emit（'close'）实际上关闭了我的模态窗口，它删除了我的整个组件实例。

这就是为什么axios调用中的$ emit（'updateparentdata'）函数未按预期执行的原因。

解决方案1：

我在axios请求中移动了$ emit（'close'），因此在收到响应后我关闭了模态窗口。

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Župančić所述，我尝试使用Vue.nextTick等待更新。这种方法也有效。

Answer 2

使用Vue.nextTick等待更新。

在axios中尝试这个：

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

Answer 3

如@RubanrajRavichandran在他的解决方案1中提到的self = this，因为它在轴颈中，然后这发生了变化。您可以改用.then((response) => {}之类的箭头功能，而this可以使用，因此您不必使用self

$ emit不会从axios内部向父级发出消息

3 个答案: