Vue2组件$ emit不调用父函数

Question

我在一个组件内部有一个按钮,该组件正在调用$emit('close')a @close='myMethod',myMethod并且当您单击组件内部的按钮时,持有组件的容器具有a 并且不会被调用.

HTML:

<button @click="myMethod">outer</button>
<div class="parent" @close="myMethod">
  <my-component></my-component>
</div>
<div id="my-component" style="display:none;">
  <button @click="$emit('close')">emit</button>
</div>

JS:

Vue.component('my-component', {
    template: '#my-component'
});

var app = new Vue({
    el: '#app',
    methods: {
      myMethod: function() {
        console.log('myMethod invoked');
      }
    }
});

如果单击外部按钮,则会调用该方法,但不会调用模板内的按钮.我错过了什么？

Jsbin:http://jsbin.com/cuhipekocu/edit？html,js,console,output

Answer 1

您没有在组件上收听事件.尝试

<div class="parent">
  <my-component @close="myMethod"></my-component>
</div>