自定义事件未在 HTML Vuejs 中捕获

我有一个HTML部分，比如：

<div v-on:customevent="test">
   <button @click="launchEvent">TestEvent</button>
</div>

在我的组件中，我有这个：

methods:{
   launchEvent(){
      this.$emit('customevent');
   },
   test(){
      console.log("I'm in");   
   }
}

但即使 tt 运行正确的功能launchEvent它也不会启动函数测试，因为事件没有被捕获，因为事件被正确启动，因为如果我尝试在 created（）中设置：

this.$on('customevent',function(){
   alert("customevent launched");
});

警报已正确启动，因此，是否可以直接在HTML上侦听自定义事件？

在 OP 指出答案不起作用后编辑

这些事件旨在用于父子组件关系，如文档中所述

因此，在您的示例中，您应该有一个父组件捕获事件，而子组件则发出它。

您的父母将看起来像：

<parent @custom-event="customEventCatched">
  <child></child>
<parent>

子组件的模板应如下所示：

<button @click="$emit('custom-event')">Emit<button>

第一个div 中的语法不正确，"clicked"应该是"click"，如

<div v-on:click="test">Test Event</div>

或按钮上使用的速记语法，

<div @click="test">Test Event</div>

我的问题是我没有正确使用事件：

现在我的代码是：

<div>
   <MyComponent @customevent="eventCatched"></MyComponent>
</div>

在MyComponent中有一个函数，如下所示：

test(){
   this.$emit("customevent");
}

在父组件中，我有一个函数事件捕获

eventCatched(){
  console.log("catched");
}

遵循此 JSFIDDLE

https://jsfiddle.net/dangvanthanh/3m6s54qx/

相关内容