元件自定義事件
阿新 • • 發佈:2022-04-02
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中配置回撥時,必須使用箭頭函式。