Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件怎么辦

這篇文章主要為大家展示了“Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件怎么辦”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件怎么辦”這篇文章吧。

創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)、手機(jī)網(wǎng)站開發(fā)、微商城、網(wǎng)站托管及網(wǎng)站維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊(cè)、國(guó)內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測(cè)試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都廣告設(shè)計(jì)行業(yè)客戶提供了網(wǎng)站制作服務(wù)。

最近學(xué)習(xí)vuejs看例子中用$on無法監(jiān)聽子組件$emit觸發(fā)事件：

使用版本

vue.js 2.2.5

參考文獻(xiàn)

1.vuejs API

2.解決實(shí)例

問題分析

1.之前寫的自定義組件事件觸發(fā)為this.$emit("myclick",this.todo.text);，這樣this指的是todo-item的每一項(xiàng)，而最后vm.$on監(jiān)聽的是app組件，也就出說監(jiān)聽的是父節(jié)點(diǎn)，而觸發(fā)的是子節(jié)點(diǎn)，故監(jiān)聽不到這個(gè)事件的。

解決思路

1.將觸發(fā)事件放在父節(jié)點(diǎn)上觸發(fā)，就可以監(jiān)聽到觸發(fā)的事件了，即this.$parent.$emit("myclick",this.todo.text);，這樣即可以在vm.$on監(jiān)聽到觸發(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無法監(jiān)聽子組件$emit觸發(fā)事件怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件怎么辦
本文URL：http://muchs.cn/article16/joocgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、建站公司、域名注冊(cè)、外貿(mào)網(wǎng)站建設(shè)、小程序開發(fā)、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容