當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue自定义事件

發布時間：2023/12/20 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue自定义事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

父組件使用props傳遞數據給子組件，子組件怎么跟父組件通信呢？這時，Vue的自定義事件就派上用場了。

1、自定義事件

每個Vue創建的實例都會出現一個事件接口

var vm = new Vue({el: '#app'})

自定義事件的定義(發布)

//vm.$on(自定義事件的名稱，自定義事件的事件處理程序)vm.$on( 'aa', function () {console.log( 'aa' )})

//自定義事件的觸發（訂閱）

// vm.$emit( 自定義事件的名稱，自定義事件處理程序需要的參數1，參數2，參數3)vm.$emit( 'aa' )

2、自定義事件的數據傳遞

我們通過下面代碼分析一下自定義事件的數據傳遞

<body><div id="app"><Father></Father></div><template id="father"><div><h3>這里是父組件</h3><p>兒子給我{{ money}} </p><Son @hongbao="givemoney"></Son></div></template><template id="son"><div><h3>這里是子組件</h3><button @click="give">給父親紅包</button></div></template> </body><script>Vue.component('Father',{template:'#father',data(){return {money:0,}},methods:{//自定義事件的定義(發布)givemoney(val){this.money=val;}}});Vue.component('Son',{template:'#son',data(){return {money:3000,}},methods:{//自定義事件的觸發（訂閱）give(){console.log(this.money)this.$emit('hongbao',this.money)}}})new Vue({}).$mount('#app')

從上述代碼可以看出，父組件通過$on監聽事件，事件處理函數的參數則為接收的數據

methods:{//自定義事件的定義(發布)givemoney(val){this.money=val;}}

子組件通過$emit可以觸發事件，第一個參數為要觸發的事件，第二個事件為要傳遞的數據

methods:{//自定義事件的觸發（訂閱）give(){console.log(this.money)this.$emit('hongbao',this.money)}}

總結

以上是生活随笔為你收集整理的Vue自定义事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。