組件自定義事件
? ? 1斤蔓、一種組件間通信的方式初茶,適用于:子組件===>父組件
? ? 2幔托、使用場(chǎng)景:A是父組件蟹倾,B是子組件塔猾,B想給A傳數(shù)據(jù)莺琳,那么就要在A中給B綁定自定義事件(事件的回調(diào)在A中)茂契。
? ? 3饮亏、綁定自定義事件:
? ? ? ? (1)看杭、第一種方式忠藤,在父組件中:<Demo @haha="test"> 或 <Demo v-on:haha="test">
? ? ? ? (2)、第二種方式楼雹,在父組件中:
? ? ? ? ? ? <Demo ref="demo"/>
? ? ? ? ? ? ....
? ? ? ? ? ? mounted(){
? ? ? ? ? ? ? ? ? ? ? ? ? //xxx是ref打的標(biāo)示
? ? ? ? ? ? ? this.$refs.xxx.$on('haha',this.test)
? ? ? ? ? ? }
? ? ? ? (3)模孩、若想自定義事件只能觸發(fā)一次尖阔,可以使用once修飾符,或$once方法榨咐。
? ? 4介却、觸發(fā)自定義事件:this.$emit('haha',數(shù)據(jù))
? ? 5、解綁自定義事件(this.$off('haha'))
? ? 6块茁、組件上也可以綁定原生DOM事件齿坷,需要使用native修飾符。
? ? 7数焊、注意:通過(guò)this.$refs.xxx.$on('haha',回調(diào))綁定自定義事件時(shí)胃夏,回調(diào)要么配置在methos中,要么用箭頭函數(shù)昌跌,否則this指向會(huì)出問(wèn)題仰禀!
在父組件A中綁定自定義事件:
在父組件A中配置回調(diào)函數(shù):
在子組件B中觸發(fā)自定義事件: