1. 程式人生 > >Vue組件綁定自定義事件

Vue組件綁定自定義事件

函數 methods click -c 這就是 += 自定義 his this

Vue組件使用v-on綁定自定義事件:
  可以分為3步理解:
    1.在組件模板中按照正常事件機制綁定事件:
      template: ‘<button v-on:click="increment">{{ counter }}</button>‘,
      如上,v-on:click就是用來給子組件綁定點擊事件的,這就是原生的自帶的事件,容易理解。
    2.子組件的事件發生時,在事件函數中向父組件“報告”這一事件(使用$emit):
      methods: {
        increment: function () {
          this.counter += 1;
          this.$emit(‘increment‘);
        }
      },
      上面事件函數中的代碼this.$emit(‘increment‘)的意思就是向父組件報告,自己發生了‘increment’事件。至於發生的事件叫什麽名字,可以隨意取名,只要在父組件中綁定時名稱一致即可。
    3.父組件在使用時,明確使用v-on綁定子組件傳來的事件:
      <button-counter v-on:increment="incrementTotal"></button-counter>
      上方的v-on:increment就是綁定的子組件的increment事件。
      常用語父組件中的數據變化與子組件的操作有關的情況。

Vue組件綁定自定義事件