vue $emit 是vue中非常重要的一個方法,它用于子組件向父組件傳遞數據,同時也可以實現父組件向祖先組件傳遞數據。在Vue中,通常父組件為子組件傳遞數據是通過prop來實現的,但是prop只能在父組件向子組件傳遞數據。有時候,子組件需要向父組件通信,這時候就需要$emit方法來實現。
使用方法
在子組件中,通過 $emit 方法來觸發事件,$emit 方法接受兩個參數,第一個是事件名稱,第二個是要傳遞的數據。
methods:{ change(){ this.$emit('changeName','xiaoming') } }這段代碼中,change方法中使用 $emit 觸發了一個 changeName 事件,同時將參數 'xiaoming' 傳遞給了父組件。
在父組件中監聽事件
在父組件中,通過 v-on 或 @ 來監聽自定義事件,通過監聽事件來獲取來自子組件的數據傳遞。
<child-component v-on:changeName="getData"></child-component> OR <child-component @changeName="getData"></child-component> <script> export default{ methods:{ getData: function(data){ console.log(data) } } } </script>這段代碼中,通過 v-on 或 @ 監聽 changeName 事件,當 changeName 事件觸發時,會執行 getData 方法,同時將 data 參數傳遞給 getData 方法打印出來。這里的 data 參數就是子組件通過 $emit 傳遞的數據。
如此便完成了子組件向父組件傳遞數據的過程,$emit 方法非常實用且易用,可以大大提高Vue組件之間的通信能力。