Question

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

<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（）方法。该组件在另一个像这样的哈巴狗模板中实例化：infini-card(v-bind.sync="cardA")

为什么？：-）

谢谢！

Answer 1

请注意，@click对于本机元素和vue组件的工作方式有所不同。

在本机组件（<div>, <button>）上，@click监听click事件。

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

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

Vue Docs：Binding Native Events to Components

vue 2 @click处理程序无法正常工作

1 个答案: