您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“Vue.js父組件$on無(wú)法監(jiān)聽(tīng)子組件$emit觸發(fā)事件怎么辦”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue.js父組件$on無(wú)法監(jiān)聽(tīng)子組件$emit觸發(fā)事件怎么辦”這篇文章吧。
最近學(xué)習(xí)vuejs看例子中用$on無(wú)法監(jiān)聽(tīng)子組件$emit觸發(fā)事件:
使用版本
vue.js 2.2.5
參考文獻(xiàn)
1.vuejs API
2.解決實(shí)例
問(wèn)題分析
1.之前寫的自定義組件事件觸發(fā)為this.$emit("myclick",this.todo.text);,這樣this指的是todo-item的每一項(xiàng),而最后vm.$on監(jiān)聽(tīng)的是app組件,也就出說(shuō)監(jiān)聽(tīng)的是父節(jié)點(diǎn),而觸發(fā)的是子節(jié)點(diǎn),故監(jiān)聽(tīng)不到這個(gè)事件的。
解決思路
1.將觸發(fā)事件放在父節(jié)點(diǎn)上觸發(fā),就可以監(jiān)聽(tīng)到觸發(fā)的事件了,即this.$parent.$emit("myclick",this.todo.text);,這樣即可以在vm.$on監(jiān)聽(tīng)到觸發(fā)的事件了。
實(shí)現(xiàn)代碼
<!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.在自定義組件中加入點(diǎn)擊事件傳給add methods:{ add:function(){ //2.這里的add拿到template中的點(diǎn)擊事件add,并執(zhí)行函數(shù) this.$parent.$emit("myclick",this.todo.text); //3.暴露給父組件中點(diǎn)擊事件名稱為my-click }, }, }) var vm=new Vue({ el:'#app', data:{ items:[ { text: 'Runoob' }, { text: 'Google' }, { text: 'Taobao' } ] }, methods:{ //5.這里執(zhí)行父組件傳遞的點(diǎn)擊函數(shù) addResult:function(value){ alert(value); }, }, }); vm.$on('myclick',function (value) { console.log(value); }) </script> </html>
以上是“Vue.js父組件$on無(wú)法監(jiān)聽(tīng)子組件$emit觸發(fā)事件怎么辦”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。