Vue.js父組件$on無法監聽子組件$emit觸發事件怎么辦

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

創新互聯主要為客戶提供服務項目涵蓋了網頁視覺設計、VI標志設計、全網營銷推廣、網站程序開發、HTML5響應式成都網站建設、手機網站開發、微商城、網站托管及網站維護、WEB系統開發、域名注冊、國內外服務器租用、視頻、平面設計、SEO優化排名。設計、前端、后端三個建站步驟的完善服務體系。一人跟蹤測試的建站服務標準。已經為成都廣告設計行業客戶提供了網站制作服務。

最近學習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觸發事件怎么辦”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

分享名稱：Vue.js父組件$on無法監聽子組件$emit觸發事件怎么辦
本文URL：http://www.2m8n56k.cn/article16/joocgg.html

成都網站建設公司_創新互聯，為您提供用戶體驗、建站公司、域名注冊、外貿網站建設、小程序開發、云服務器

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

Vue.js父組件$on無法監聽子組件$emit觸發事件怎么辦