Vue 事件的$event参数=事件的值案例

对于Vue事件来说，$event是一个特殊的参数，它代表着传递给事件处理函数的原始DOM事件对象，例如鼠标点击事件、键盘输入事件等等。通过访问$event对象，我们可以获取原始事件的相关信息，比如点击的坐标、按下的键盘按键等等。在本篇攻略中，我们将详细讲解如何使用$event参数来实现事件值的处理。

1. 事件值的提取

有些情况下，我们需要获取事件的值来进一步处理。例如，我们要通过点击按钮来实现一个数字加1的功能，代码如下：

<template>
  <div>
    <button @click="count++">Count: {{ count }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  }
};
</script>

但是，如果我们想实现在点击按钮时传入一个参数，比如每次点击增加的数量，该怎么办呢？这时候，我们可以使用$event来提取事件的值。修改上述代码，将按钮通过v-for指令渲染出10个按钮，每个按钮传入一个不同的数值：

<template>
  <div>
    <button v-for="n in 10" :key="n" @click="increment(n)">{{ n }}</button>
  </div>
</template>

<script>
export default {
  methods: {
    increment(n, $event) {
      this.count += n;
    }
  },
  data() {
    return {
      count: 0
    };
  }
};
</script>

在increment方法中，我们将$event作为第二个参数传入函数，然后通过$event.target.innerText来获取按钮的文本内容，也就是传入的数值n。之后再将该数值加到count中即可。

2. 事件的阻止和拦截

有时候，我们希望在事件触发时阻止浏览器的默认行为或阻止事件冒泡，这时候也可以使用$event来控制事件的流程。

阻止浏览器默认行为

例如，我们要在点击链接时阻止浏览器默认的跳转行为，可以使用$event.preventDefault()方法来实现：

<template>
  <div>
    <a href="https://www.baidu.com" @click="stopLink($event)">点击链接</a>
  </div>
</template>

<script>
export default {
  methods: {
    stopLink($event) {
      $event.preventDefault();
      alert("stop link");
    }
  }
};
</script>

在stopLink方法中，我们调用了$event.preventDefault()方法来阻止浏览器默认的跳转行为，之后会弹出一个提示框。

阻止事件冒泡

再例如，我们把一个按钮嵌套在另一个按钮内部，点击内部按钮时不希望触发父按钮的点击事件，可以使用$event.stopPropagation()方法来阻止事件冒泡：

<template>
  <div>
    <button @click="outerClick">
      外部按钮
      <button @click.stop.prevent="innerClick">内部按钮</button>
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      alert("outer click");
    },
    innerClick() {
      alert("inner click");
    }
  }
};
</script>

在innerClick方法中，我们使用了.stop修饰符来阻止事件冒泡，之后只会触发innerClick方法，不会再继续触发outerClick方法。

通过以上两个示例，我们可以看到$event参数的强大用途，可以帮助我们更加灵活地处理各种事件。