6、城堡决斗浏览器游戏开发：组件交互、动画与事件处理

城堡决斗浏览器游戏开发：组件交互、动画与事件处理

1. 组件原生事件监听

在卡片组件上添加点击事件处理程序时，我们可能会遇到一些问题。例如，我们尝试为卡片添加点击事件：

<card :def="testCard" @click="handlePlay" />

并在主组件中定义一个简单的方法：

methods: {
  handlePlay () {
    console.log('You played a card!')
  }
}

但在浏览器中测试时，你会发现控制台没有输出任何内容。这是因为 Vue 有自己的组件事件系统，即“自定义事件”，它与浏览器事件是分离的。在这里，Vue 期望的是一个自定义的 click 事件，而不是浏览器的点击事件，所以处理方法不会被调用。

为了解决这个问题，我们需要在 v-on 指令上使用 .native 修饰符：

<card :def="testCard" @click.native="handlePlay" />

现在，当你点击卡片时， handlePlay 方法就会按预期被调用。

2. 自定义事件实现子组件向父组件通信

之前，我