Question

我在调用$emit('close')的组件内部有一个按钮，并且当您单击按钮时，持有该组件的容器有@close='myMethod'并且myMethod没有被调用在组件内部。

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>

Vue2组件$ emit不调用父函数

1 个答案: