最近學習vuejs看例子中用$on無法監聽子組件$emit觸發事件：
使用版本
vue.js 2.2.5
參考文獻
1.vuejs API
2.解決實例
問題分析
1.之前寫的自定義組件事件觸發為this.$emit("myclick",this.todo.text);，這樣this指的是todo-item的每一項，而最后vm.$on監聽的是app組件，也就出說監聽的是父節點，而觸發的是子節點，故監聽不到這個事件的。
解決思路
1.將觸發事件放在父節點上觸發，就可以監聽到觸發的事件了，即this.$parent.$emit("myclick",this.todo.text);，這樣即可以在vm.$on監聽到觸發的事件了。
實現代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Emit事件和On事件</title></head><script src="../js/vue.js"></script><link rel="stylesheet" href="../css/demo.css" rel="external nofollow" /><body><div id="app"> <todo-item v-for="(item,index) in items" v-bind:todo="item" v-on:myclick="addResult"></todo-item></div></body><script> Vue.component('todoItem',{ props:['todo'], template:'<li v-on:click="add">{{todo.text}}</li>', //1.在自定義組件中加入點擊事件傳給add methods:{ add:function(){ //2.這里的add拿到template中的點擊事件add，并執行函數 this.$parent.$emit("myclick",this.todo.text); //3.暴露給父組件中點擊事件名稱為my-click }, }, }) var vm=new Vue({ el:'#app', data:{ items:[ { text: 'Runoob' }, { text: 'Google' }, { text: 'Taobao' } ] }, methods:{ //5.這里執行父組件傳遞的點擊函數 addResult:function(value){ alert(value); }, }, }); vm.$on('myclick',function (value) { console.log(value); })</script></html>以上這篇解決Vue.js父組件$on無法監聽子組件$emit觸發事件的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
