vue 2 @click 处理程序未按预期工作答案

【问题标题】：vue 2 @click handler not working as expectedvue 2 @click 处理程序未按预期工作
【发布时间】：2019-09-11 19:27:16
【问题描述】：

我有一个包含许多“面孔”的“卡片”组件。
点击卡片，它会显示另一张面孔。

<template lang="pug">
  .infini-card(@click.prevent="clickCard")
    infini-card-empty(v-if="face==='empty'")
    infini-card-secret(v-if="face==='secret'" v-bind="cardData")
    infini-card-reveal(v-if="face==='reveal'" v-bind="cardData")
</template>

“.infini-card” div 有一个点击处理程序，我可以在那里执行 switch() 来处理所有不同类型面孔的更改。很酷。

但是，我尝试的第一件事没有奏效：

<template lang="pug">
  .infini-card
    infini-card-empty(v-if="face==='empty'")
    infini-card-secret(v-if="face==='secret'" v-bind="cardData" @click.prevent="clickSecret")
    infini-card-reveal(v-if="face==='reveal'" v-bind="cardData")
</template>

永远不会在 v-if'd 面上调用 clickSecret() 方法。该组件在另一个 pug 模板中实例化，如下所示：infini-card(v-bind.sync="cardA")

为什么？ :-)

提前致谢！

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

请注意，@click 对于原生元素和 vue 组件的工作方式不同。

在原生组件 (<div>, <button>) 上，@click 侦听点击事件。

在自定义组件 (<infini-card-secret>) 上，@click 侦听从该自定义组件 (this.$emit('click')) 发出“点击”的事件

要确保@click 侦听自定义组件上的本机点击事件，请使用.native 修饰符，如下所示：
- @click.native="clickSecret"。

Vue 文档：Binding Native Events to Components

【讨论】：