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

我在Vue.js（2）中有一个自定义组件：

Vue.component（“模态面板”{
道具：{
身份证：{
必填项：true
},
标题：{}，
尺寸：{
验证器：函数（值）{
return！value | | value==“lg”| | value==“sm”；
}
}, 
确认标签：{
“默认值”：“是”，
}, 
封闭标签：{
“默认值”：“否”
},
确认：{
类型：功能
}
},
//...
模板：`
//...
{{confirmLabel}}
//...
`
}

这是使用组件的代码

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

。。。

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

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

---

谢谢。

自Vue 2.4以来，Vue组件有一个

$listeners

属性

包含父作用域v-on事件侦听器（不带.native 修改器）

这是有文档记录的。您可以通过检查

$listeners

属性来确定父级是否正在侦听特定事件

---

原始答案

组件自行决定事情通常不是一个好的做法

我建议您使用

confirm

callback属性。您可以将函数作为属性传入。然后您可以决定显示/隐藏是否收到回调的按钮

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

Vue.component（“模态”{
道具：[“确认”]，
模板：`
情态动词
证实
`
})

编辑

您可以确定给定事件的组件上是否定义了处理程序，但这需要检查内部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"]
    }
  }
})

Vue.component（“模态”{
模板：`
情态动词
证实
`,
计算：{
hasConfirmHandler（）{
return！！这个。_事件[“确认”]
}
}
})

如果从父级定义了处理程序，则组件的

\u events

属性将包含该处理程序

---

.

您需要使用

v-bind

或

：

绑定函数，而不是将其作为字符串传递。因此，请使用

：确认语法：



然后在组件模板中，只需使用
v-on:click=“confirm（）”
：


{{confirmLabel}}
他没有传递
确认
在问题中，他有一个使用
@handler
语法的事件侦听器。谢谢Bert。是的，这是一个选项，我只是好奇其他方法是否可行。据我所知，不可行。@yavuzkavus从技术上讲，这是可能的，但您必须检查Vue的内部API。在在组件中，
\u events
属性将列出组件上的事件处理程序。您可以检查是否有
confirm
@yavuzkavus的处理程序。我添加了一个示例，但我建议使用回调方法。
Vue.component("modal",{
  template: `
    <div>
      <h1>Modal</h1>
      <button v-if="hasConfirmHandler" @click="$emit('confirm')">Confirm</button>
    </div>
  `,
  computed:{
    hasConfirmHandler(){
      return !!this._events["confirm"]
    }
  }
})