Нажмите событие в vuejs на пользовательский компонент?

Question

У меня в главном компоненте один пользовательский компонент, и мне нужно запустить пользовательское событие при нажатии, я попытался сделать это следующим образом:

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

Это не работает, и я попытался решить эту проблемус добавлением @ click.native

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

С .native это работает, но оно запускает событие каждый раз, когда я щелкаю внутри своего «дочернего компонента».

Можно ли как-то избежатьзапустить это событие снова, если я нажму внутри "child-component"?

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

Вы должны показать код в компоненте, который генерирует событие.

У вас должно быть что-то вроде этого:

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

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

.native не должен использоваться здесь.