在自定义组件上的vuejs中单击事件？

Question

我的主要组件中有一个自定义组件，我需要在点击时触发一个自定义事件，我以此方式进行了尝试：

<child-component @click="fireCustomEvent"></child-component>

这不起作用，我尝试通过添加@ click.native

解决此问题。

<child-component @click.native="fireCustomEvent"></child-component>

使用.native可以正常工作，但是每次我在“子组件”内部单击时，都会触发该事件。

如果我在“子组件”内部单击，是否可以避免通过某种方式再次触发此事件？

Answer 1

为此，您需要子组件内部的单击处理程序，然后将事件发送给父组件。

在子组件中：

//child component
<template>
   <div @click="$emit('wasClicked')")>click here</div>
</template>

在父组件中：

//parent component
<template>
   ...
   <child-component @wasClicked="fireCustomEvent"></child-component>
</template>

Answer 2

我有一个类似的问题，我通过添加div来包装自定义组件来解决了这个问题，并且它可以工作。因此，尝试执行此操作即可。

<div @click="fireCustomEvent">
    <child-component></child-component>
</div>

Answer 3

您应该在发出事件的组件中显示代码。

您必须具有以下内容：

//code that trigger an click event
this.$emit('click');

//or if you you to pass some data
this.$emit('click','some_data');

.native不需要在这里使用。