Question

我有一个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它也没有启动函数测试，因为事件没有被捕获，因为事件是正确启动的，因为如果我尝试set in created（）：

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

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

Answer 1

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

这些事件旨在用于父子组件关系，如documentation

中所述

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

您的父母将会是：

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

您的子组件模板应该是：

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

Answer 2

第一个div中的语法不正确，＆＃39;点击了＆＃39;应该点击＆＃39;，如

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

或按钮上使用的简写语法

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

Answer 3

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

现在我的代码是：

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

在 MyComponent 中有一个类似的函数：

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

在父组件中，我有一个函数 eventCatched

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

跟着这个jsfiddle