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>
  

三、小結

Vue中的@click事件可以幫助我們監聽DOM元素的點擊事件，同時Vue也對onclick事件進行了一些影響，使得事件更加靈活可控。通過父子組件之間的事件傳遞機制，我們可以實現一些更為高級的功能。同時，Vue的事件調用者(invoker)機制也為我們在組件間傳遞事件提供了一定的保障。