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

城堡决斗浏览器游戏开发：组件交互与动画实现

1. 组件原生事件监听

在Vue开发中，为组件添加点击事件处理程序时，可能会遇到一些意外情况。例如，我们尝试为卡片组件添加点击事件：

<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. 使用自定义事件进行子父组件通信

之前，