Vue中的事件$emit是一種觸發方式,可以將指定事件傳遞給父組件或嵌套組件,從而實現組件之間通信。
當一個子組件需要將信息傳遞給父組件的時候,利用Vue實現的組件的事件和監聽機制可以非常方便實現。當需要把其中一個組件的方法或變量傳遞給另一個組件的時候,可以使用emit和on兩個方法來實現。
//發送事件 this.$emit('自定義事件名稱', 參數); //監聽事件 this.$on('自定義事件名稱', function(參數){});
在子組件中,通過使用this.$emit(自定義事件名稱)來觸發組件事件,然后父組件通過在組件標簽上綁定相應的事件,并在方法中傳遞子組件傳遞回來的參數來接收事件。
//子組件 Vue.component('child-component', { template: '', methods: { notify: function () { this.$emit('send-msg', '這是一個來自子組件的消息') } } }) //父組件 Vue.component('parent-component', { template: '', methods: { receiveMsg: function (payload) { console.log(payload) // 這是一個來自子組件的消息 } } })
通過上方代碼可以看到,在父組件中監聽了子組件傳遞回來的'msg'事件,然后接收返回的數據,完成了組件之間的信息傳遞。