<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">能否让$emit方法返回一个Promise对象？这可以知道分发的事件在什么时候完成，方便在对这个事件进行监听的所有方法完成后进行一些额外的操作。<br>
比如说，一个按钮组件，在点击之后变成加载中状态，在点击操作（这个操作可能是向服务器请求数据，也有可能仅仅只是个同步操作）完成之后，还原成之前的状态。这样的话，可以让按钮的状态变化与事件逻辑分离开。</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">可以像下面一样的使用</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  async onClick () {
     this.loading = true
     await this.$emit('click')
     this.loading = false
  }
}"><pre class="notranslate"><span class="pl-kos">{</span>
  <span class="pl-k">async</span> <span class="pl-en">onClick</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">loading</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
     <span class="pl-k">await</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">$emit</span><span class="pl-kos">(</span><span class="pl-s">'click'</span><span class="pl-kos">)</span>
     <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">loading</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Version</h3>
<p dir="auto">2.2.6</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/50wL7mdz/27555/" rel="nofollow">https://jsfiddle.net/50wL7mdz/27555/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;component @click=&quot;callback&quot;&gt;
&lt;/component&gt;

function callbcak() {
  return new Promise(function(resolve, reject) {
    setTimeout(() =&gt; {
      resolve('resolved')
    }, 2000)
  })
}

// in component
&lt;script&gt;
  ...
    methods: {
      handleClick(evt) {
        var promise = this.$emit('click', evt)
        console.log(promise)   // promise is component self, not the return promise
      }
    }
  ...
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;component @click="callback"&gt;
&lt;/component&gt;

function callbcak() {
  return new Promise(function(resolve, reject) {
    setTimeout(() =&gt; {
      resolve('resolved')
    }, 2000)
  })
}

// in component
&lt;script&gt;
  ...
    methods: {
      handleClick(evt) {
        var promise = this.$emit('click', evt)
        console.log(promise)   // promise is component self, not the return promise
      }
    }
  ...
&lt;/script&gt;
</code></pre></div>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">expect $emit get the return value of event's callback</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">get component self</p>