vue中的事件監聽之——v-on vs .$on

阿新 • • 發佈：2018-11-10

跟著視訊中老師的教學視訊學vue的時候，看很多時候都用@(v-on)來監聽子級emit的自定義事件，但在bus匯流排那塊，又用.$on來監聽bus自身emit的事件，v-on之間似乎相似但又不同，今天對照vue官網api學習並coding了相關程式碼，兩者的用法與比較描述如下。

v-on

vm.$on

可監聽普通dom的原生事件；

可監聽子元件emit的自定義事件；

監聽當前例項的自定義事件

vue官網相關說明截圖：

由此可見，想監聽vue例項自身自定義事件，只能用.$on並且這是vue例項的方法，不能用在普通dom上；

v-on用在在普通dom標籤上，可以監聽原生事件；用在vue元件標籤上，可以監聽子元件emit的自定義事件；

具體程式碼實踐如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!--監聽子元件emit的自定義事件-->
            <child @change="handleChange">child1</child>
            <child @change="handleChange">child2</child>
            <child @change="handleChange">child3</child>
        </div>
    </body>
    <script type="text/javascript" src="../js/vue.js" ></script>
    <script>
        var 
 Child = {
            template:`<div @click='handleClick'>
                <slot></slot>
            </div>`,
            methods:{
                handleClick(){
                    this.$emit( 'change' );
                }
            },
            mounted(){
                 
//監聽當前例項的自定義change事件
                this.$on( 'change',function(){
                    console.log( 'child-change-event-handler' );
                } );
            }
            
        };
        var vm = new Vue({
            el:'#app',
            components:{
                Child,
            },
            methods:{
                handleChange(){
                    console.log( 'parent-change-event-handler' );
                },
                handleClick(){
                    console.log( 'handleClick' );
                }
            },
            mounted(){
                this.$on( 'change',this.handleChange );
            }
        });
    </script>
</html>

vue中的事件監聽之——v-on vs .$on

跟著視訊中老師的教學視訊學vue的時候，看很多時候都用@(v-on)來監聽子級emit的自定義事件，但在bus匯流排那塊，又用.$on來監聽bus自身emit的事件，v-on之間似乎相似但又不同，今天對照vue官網api學習並coding了相關程式碼，兩者的用法與比較描述如下。 v-

關於vue中滾動監聽失效問題

top scrolltop ont bsp .cn vue 資料 index document 在vue項目中, 監聽window滾動失效;並且document.body.scrollTop一直是0的情況! 查找了許多資料;並沒有找到合理的解決方案; 最中發現,在in

事件監聽之統計登錄用戶人數（含用戶名）案例

用戶名登錄名 lsp eat 不同 over eve utf-8 put （一）創建一個User類，用於封裝一個用戶信息，該類實現了HttpSessionBindingListener接口中的valueBound()方法和valueUnbound()方法 1 packa

springboot 中事件監聽模式的一種實現

前言: 事件監聽模式是一種常用的設計模式，在springboot 中我們如何實現呢？首先我們要理解事件監聽中需要的幾個角色事件釋出者（即事件源）事件監聽者事件本身廢話不多說直接上程式碼定義事件本身事件本身需要繼承ApplicationEvent package com.yxd; impo

vue事件監聽函式on中的this指標域

使用eventBus在兩個元件A，B之間通訊： //定義全域性eventBus用於事件傳遞 var bus = new Vue(); //A元件 var A = Vue.component({ ... data:{ dataA:1, }, //在鉤子函式中將監聽_even

Vue元件通訊之二：事件監聽函式$emit/$on/$off

在vue2.x版本中自定義時間都需要通過$emit/$on/$off函式來進行觸發、監聽和取消監聽。如果瞭解過JavaScript的設計模式-------觀察者模式，一定知道dispatchEvent和addEventListener這兩個方法。Vue元件中也有與之類似的模式，子元件用$emi

如何對vue中的元件進行點選事件監聽

Spring中使用ApplicationContext進行事件的監聽之ApplicationEvent，ApplicationListener

spring的ApplicationEvent的使用 Spring 3.0中提供了很多類似*Aware的類，其中ApplicationContextAware介面可以實現我們在初始化bea

JS中的事件監聽與事件流

pan 交互 ack 其他獲得發生 listen 監聽器 pre 事件監聽：　　使用監聽器（eventListener）來預定事件，在傳統軟件工程中稱成為觀察者模式　　執行某種操作時（特定的交互瞬間），會產生對象，對象會沿事件流的方向傳播。事件流: 　　事件流有

java中的key事件監聽機制

com java.awt imp package 時間 ext javax .get pri package com.at221; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; im

Java 中的事件監聽機制

add import userdata 開發人員 util ner dns pre sta 看項目代碼時遇到了好多事件監聽機制相關的代碼。現學習一下： java事件機制包含三個部分：事件、事件監聽器、事件源。 1.事件：繼承自java.util.EventO

Java中的事件監聽機制

void 初始化 release vax 輸入 logs p s get location 鼠標事件監聽機制的三個方面： 1.事件源對象：　　事件源對象就是能夠產生動作的對象。在Java語言中所有的容器組件和元素組件都是事件監聽中的事件源對象。Java中根據事件的動作來區

ALERT日誌中常見監聽相關報錯之二：ORA-3136錯誤的排查

hang gui tns -c 未在 fatal odr bound 問題最近在多個大型系統中遇到此問題，一般來說假設client未反映異常的話能夠忽略的。假設是client登陸時遇到ORA-12170: TNS:Co

No.5一步步學習vuejs之事件監聽和組件

sage 應該 shift vuejs 進行編譯器 add round mage 一監聽事件可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。 <div id="demo1"> <button v-on:cli

SpringBoot入門之事件監聽

int () AI stat boot.s over style 資源 nvi 　　spring boot在啟動過程中增加事件監聽機制，為用戶功能拓展提供極大的便利，sptingboot支持的事件類型有以下五種： ApplicationStartingEvent Appl

vue 組件子向父親通信用自定義方法用事件監聽

自定義 let 事件監聽 () 有理 mode head con methods <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Title

JAVA 圖形開發之計算器設計（事件監聽機制）

oncommand image 事件監聽 str one 創建 dac orm mat /*文章中用到的代碼只是一部分，需要源碼的可通過郵箱聯系我 [email protected]*/ 前段時間剛幫同學用MFC寫了個計算器，現在學到JAVA的圖形開發，就試著水了一個計算器

redis事件監聽及在訂單系統中的使用

https://blog.csdn.net/qq_37334135/article/details/77717248 通常在網上買好物品，或者說手機掃碼後，點選付款，這時就會向後臺傳送請求，生成訂單資訊，以及夠買商品的資訊存入到資料庫對應的表比如：訂單表和商品銷售表，或者還有物流資訊表等。簡

Vue的watch監聽事件

lln 觸發 doctype new mode last 變化 char ext Vue的watch監聽事件相關Html: <!DOCTYPE html> <html lang="en"> <head> &l

關於vue事件監聽的一個問題

而且擁有語言輔助 solid return roc 要去當我由於新工作需要用vue，所以最近接觸最多的也是vue，因為之前一直在用react，所以對於vue上手還是很快的。我也盡量找一些他們兩個的異同點，除了多了一些輔助用的方法以外，最大的不同應該是對於組件間的通

vue中的事件監聽之——v-on vs .$on

相關推薦