Vue onclick事件详解

一、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>