Vue onclick事件详解

发布时间：2023-05-17

一、Vue click 事件

Vue中的@click事件，是一种监听DOM元素点击事件的方式。这个事件可以绑定在普通的HTML元素上，也可以绑定在自定义组件的根元素上。 通过@click事件，我们可以执行自定义的JavaScript方法。

<template>
  <div>
    <button @click="onClick">点击我</button>
  </div>
</template>
<script>
  export default {
    methods: {
      onClick() {
        console.log("点击了Button！");
      }
    }
  }
</script>

二、Vue对onclick事件的影响

通过使用Vue，我们可以更加灵活地控制元素的行为。Vue对onclick事件的影响主要有以下几点：

1、事件的动态绑定

在Vue中，我们可以使用v-bind指令来动态地绑定事件。这个指令可以和@click指令联合使用。

<template>
  <div>
    <button v-bind:onclick="dynamicEvent">动态绑定事件</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        eventName: "onClick"
      }
    },
    computed: {
      dynamicEvent() {
        return this.eventName;
      }
    },
    methods: {
      onClick() {
        console.log("动态绑定事件");
      }
    }
  }
</script>

2、事件的调用者

在Vue中，一个组件的方法可能会被其子组件调用。为了避免这种情况，Vue提供了一个事件调用者（invoker）的概念。在事件绑定时，我们可以通过$event来获取事件的调用者。

<template>
  <div>
    <button @click="onClick">点击我</button>
  </div>
</template>
<script>
  export default {
    methods: {
      onClick(event) {
        console.log(event.currentTarget); //当前DOM元素
        console.log(event.target); //事件执行者
      }
    }
  }
</script>

3、事件的传递

在Vue中，我们可以通过父子组件之间的事件传递来达到某些目的。父组件可以通过$emit方法来触发一个事件，在子组件中通过@事件名来接收这个事件。

<!-- 父组件 -->
<template>
  <div>
    <child @change="onChildChange"></child>
  </div>
</template>
<script>
  export default {
    methods: {
      onChildChange(value) {
        console.log(value); //接收子组件传递的值
      }
    }
  }
</script>
<!-- 子组件 -->
<template>
  <div>
    <button @click="$emit('change', 'new value')">点击我</button>
  </div>
</template>

三、小结

Vue中的@click事件可以帮助我们监听DOM元素的点击事件，同时Vue也对onclick事件进行了一些影响，使得事件更加灵活可控。通过父子组件之间的事件传递机制，我们可以实现一些更为高级的功能。同时，Vue的事件调用者（invoker）机制也为我们在组件间传递事件提供了一定的保障。

推荐文章