是否可以从Vue.js 2中的组件访问事件侦听器？

Question

我在Vue.js(2)中有一个自定义组件，如：

Vue.component("modal-panel", {
    props: {
        id: {
            required: true
        },
        title: {} ,
        size: {
            validator: function(value) {
                return !value || value=="lg" || value=="sm";
            }
        }, 
        confirmLabel: {
            "default": "Yes",
        }, 
        closeLabel: {
            "default": "No"
        },
        confirm: {
            type: Function
        }
    },
    //...
    template: `
        //...
        <button type="button" class="btn btn-primary confirm" data-dismiss="modal" v-on:click="$emit('confirm')" v-if="confirm">{{confirmLabel}}</button>
        //...
    `
}

这是使用组件的代码

<modal-panel title="New User" id="userModal" @confirm="doSomething">...</modal-panel>

从组件代码中可以看出，确认已经插入到道具中，并且在模板中的按钮代码上有一个条件呈现，根据是否附加确认侦听器。但是，没有呈现按钮。我检查了组件dom和属性，但是没有这样的信息。

是否可以根据特定侦听器是否附加到vue.js中的组件来进行条件呈现？

谢谢。

Answer 1

从Vue 2.4开始，Vue组件具有一个$listeners属性。

包含父范围v-on事件侦听器(没有.native修饰符)。

这是记录在案的这里。您可以通过检查$listeners属性来确定父事件是否正在侦听特定事件。

**原文**

通常情况下，组件自己动手来决定事情并不是很好的做法。

相反，我建议您有一个confirm回调属性。您可以将函数作为属性传入。然后，您可以决定在是否收到回调时显示/隐藏按钮。

Vue.component("modal",{
  props:["confirm"],
  template: `
    <div>
      <h1>Modal</h1>
      <button v-if="confirm" @click="confirm">Confirm</button>
    </div>
  `
})

示例。

编辑

您可以确定是否存在为给定事件在组件上定义的处理程序，但它需要检查内部Vue属性，而且您只应自己承担使用该属性的风险。

Vue.component("modal",{
  template: `
    <div>
      <h1>Modal</h1>
      <button v-if="hasConfirmHandler" @click="$emit('confirm')">Confirm</button>
    </div>
  `,
  computed:{
    hasConfirmHandler(){
      return !!this._events["confirm"]
    }
  }
})

如果从父处理程序中定义了处理程序，则组件的_events属性将包含处理程序。

示例。

Answer 2

您需要使用v-bind或:绑定您的函数，而不仅仅是将其作为字符串传递。因此，请使用:confirm语法：

<modal-panel title="New User" id="userModal" :confirm="doSomething"></modal-panel>

然后在组件模板中，只需使用v-on:click="confirm()"

<button type="button" class="btn btn-primary confirm" data-dismiss="modal" 
  v-on:click="confirm()" 
  v-if="confirm">
  {{confirmLabel}}
</button>