1. 程式人生 > 其它 >元件自定義事件

元件自定義事件

  1.作為一種,子元件===>父元件 的元件間通訊方式;

  2.使用場景:父元件中需要給子元件繫結自定義事件,並且事件的回撥需要在父元件中;

  3.繫結:

    1.在父元件中:<Demo @CustomCaseName = "test" / > 或 <Demo v-on:CustomCaseName = "test" / >

    2.在父元件中定義:

<Demo ref = "xxx" />
...
mounted(){
  this.$refs.xxx.$on('CustomCaseName',this.test)
}

    3.如果需求自定義事件只能觸發一次,可以使用once修飾符,或$once方法;

  4.觸發自定義事件:this.$emit("CustomCaseName",需要傳遞的資料);

  5.解綁自定義事件:this.off("CustomCaseName");

  6.元件上繫結原生DOM事件,需要加上native修飾符,否則即使是原生DOM事件名(例如click)也會被當作自定義事件繫結;

  7.值得注意的是,通過this.$refs.xxx.$on("CustomCaseName",回撥)繫結自定義事件時,為了保證this的指向父元件,需要在methods中設定回撥,直接$on中配置回撥時,必須使用箭頭函式。