Vuejs $emit 没有在回调时触发父函数答案

【问题标题】：Vuejs $emit didn't trigger parent's function on callbackVuejs $emit 没有在回调时触发父函数
【发布时间】：2017-09-05 08:45:14
【问题描述】：

我的问题是这样的：Vuejs $emit doesn't fire on callback。但是我在我的项目中使用了超级代理。这是我的代码：

//Parent.vue
<Child v-on:savevideo="toSaveVideo"/>
...
methods:{
  toSaveVideo:function(data){
    console.log('add');
  }
}

//Child.vue
<button @click="toAdd">Add</button>
...
methods:{
  toAdd:function(){
    ...
    let self = this;
    superagent
      .get(url)
      .query({data:data})
      .end(function(err,res){
        //trigger parent function
        let resData = res.body.data;
        self.$emit('savevideo',resData);
    })
  }
}

请求成功，但触发“savevideo”时，父级中的“toSaveVideo”方法没有打印任何内容。但是，当我将发射放在回调之外时，一切都很好。为什么 $emit 事件不会在回调中触发？

【问题讨论】：

标签： javascript callback vue.js superagent emit

【解决方案1】：

好的，我想通了。

'v-if' 绑定在子组件上。

因为在我的项目中，子组件中，有另一个触发器'close'来关闭这个子组件，并且它是在回调之外发出的，这导致了问题。

//Parent.vue
<Child v-on:savevideo="toSaveVideo" v-if="showChild" v-on:close="toClose"/>
...
methods:{
  toClose:function(){
    this.showChild = false;
  }
}

//Child.vue
<button @click="toAdd">Add</button>
...
methods:{
  toAdd:function(){
    ...
    let self = this;
    superagent
      .get(url)
      .query({data:data})
      .end(function(err,res){
        //trigger parent function
        let resData = res.body.data;
        self.$emit('savevideo',resData);
        //'close' should be emitted here!
    })
    this.$emit('close'); //bad code!! This cause the problem!
  }
}

【讨论】：