Vue.js父元件$on無法監聽子元件$emit觸發事件解決辦法

阿新 • • 發佈：2019-01-28

Vue.js父元件`$on`無法監聽子元件`$emit`觸發事件解決辦法

最近學習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"/>
<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觸發事件解決辦法最近學習vuejs看例子中用$on無法監聽子元件$emit觸發事件：使用版本 vue.js 2.2.5 參考文獻 1.v

Vue.js（13）- Watch監聽資料變化

watch 監聽的特點：監聽到某個資料的變化後，側重於做某件事情；只要被監聽的資料發生了變化，會自動觸發 watch 中指定的處理函式； app.vue <template> <div> <p>姓名：<input type="t

使用vue.js在頁面內元件監聽scroll事件

思路：scroll在哪兒個元件內，就在獲取那個dom元素。網上好多思路是window.addEventListener("scroll", function(){ console.log('scrolling'); });這是監聽不到的！如果你整個

vue.js中微信公眾號中支付寶支付失敗bug解決辦法

微信公眾號中呼叫支付寶支付需要在瀏覽器中開啟支付連結然後呼叫支付才可以。具體方法：1、檔案 2、我們使用的是post方法提交。下面是在vue.js中使用的方法總結1、建立alipay頁面路由，調起瀏覽器支付提示頁面。（樣式太多，省略）<template> &l

vue的.native 修飾，解決iview中input 無法監聽enter事件

有時候，你可能想在某個元件的根元素上監聽一個原生事件。可以使用 .native 修飾 v-on 。例如：直接寫成下面這樣enter事件將無效<Input type="password" v-mod

react-router搭配react-redux無法監聽路由變化的問題

不必要默認 cti 傳遞通過 nbsp fun urn style 在react中，要將react組件連接到redux中，通常會這樣包裝組件 class Home extends Component { } function select(state)

JS監聽頁面滾動到底部事件

his div span 頁面 == nbsp scroll win cnblogs 廢話不說，直接上代碼，放心我這個是最好的,直接放到js腳本裏，直接生效: $(window).scroll(function(){ var scrollTo

Qt 5.8 QTcpServer 無法監聽局域網 ip 地址問題

成功 str 綁定 res oca lan 方法 ring erro 　　系統： Windows 7 Server Pack 1；Qt： Qt 5.8 for android 。　　在使用 QTcpServer 的時候，使用 listen 函數監聽局域網地址（192.1

linux 下apche無法監聽端口解決辦法(Permission denied: make_sock: could not bind to address)

gas his sys linux. ngs eui ner 一是 fix 想建立一個測試用的虛擬主機，遇到了這個問題：[root@localhost html]# service httpd startStarting httpd: httpd: Could not re

WeGame導致WSL無法監聽端口問題

bash flow ram 無法 game 最新 issues href IT Windows 10 系統自帶Linux子系統（WSL），可以方便的使用WSL運行Linux程序和腳本。筆者在WSL上運行Redis時突然發現無法監聽6379端口，嘗試重新安裝WSL無果。後來

vue給當前頁面加滾動監聽怎麼樣不影響其他頁面

最近利用vue寫了一個網站，在網站某一個頁面滾動到某一個地方後執行某一動化，所以要獲取拿一個div到頂部的距離，所以我在頁面載入的時候給window加了一個滾動的監聽 mounted(){ window.addEventListener('scroll', this.handleScro

JS 實時監聽input的value值改變解決方案

該方案在 FoxFire、Chrome、360急速、Microsoft Edge、IE11下測試均可以正常顯示。 html頁面程式碼： <!DOCTYPE html><html><head> <meta charset="

Js（Jquery）實時監聽input輸入框值的變化

效果圖 Js寫法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&

django_rq無法監聽兩個佇列問題

　　django_rq是為django整合redis佇列，這個用的少，一般會選擇celery，沒辦法專案中用到了。用起來很簡單，配置可以參考官方文件：https://pypi.org/project/django-rq/。　　settings.py 只需要配置如下： INSTALLED_APPS =（

vue.js父元件給子元件傳遞資料

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script t

vue computed計算屬性和watch監聽屬性解疑答惑

computed計算屬性計算屬性類似於方法，用於輸出data中定義的屬性資料的結果，data資料變化時，計算屬性的結果會同步變化，需要注意的是計算屬性不可與data定義的屬性同名。　相比於方法它的優勢是隻有當依賴的屬性變化時，才會重新計算。而方法會在每次重新rende

js監聽瀏覽器切換標籤欄事件

var OriginTitile = document.title, titleTime document.addEventListener('visibilitychange', function() { if (document.hidden) {

vue裡的watch 和 computed 監聽的不同

1.computed裡是偏向於通過監聽data裡的值變化後，經過運算返回一個新的計算結果，所以k不能與data裡的k重名，並且必須有return，能夠快取，依賴的值不變化不會進行重複計算；而watch是監聽data裡的值的變化，k是data裡的

js監聽輸入框內容變化事件

如果你在實現“統計input、textarea文字框輸入字數”中遇到問題，閱讀本文或許可以幫助你解決這個棘手的問題！手機頁面開發，要統計textareal文字框輸入字數，使用onkeyup雖然可以監聽到輸入框的文字字數變化，但在iphone下有個問題：

js/jQery中的鍵盤監聽事件觸發回車鍵位登入觸發教程及demo

js/jQery中的鍵盤監聽事件觸發回車鍵位登入觸發教程及demo 在我們專案的過程中經常會遇到需要鍵盤來控制的事件，比如：登入、搜尋等，廢話不多說上程式碼！！我這裡主要是做了兩個的監聽，一個是回車的，一個是通用複製的，可以在判斷中寫入方法體來控制 <script

Vue.js父元件$on無法監聽子元件$emit觸發事件解決辦法

Vue.js父元件$on無法監聽子元件$emit觸發事件解決辦法

相關推薦

Vue.js父元件`$on`無法監聽子元件`$emit`觸發事件解決辦法