說一說$emit和$on

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

一、$emit

1、this $emit（'自定義事件名',要傳送的資料）；

2、觸發當前例項上的事件，要傳遞的資料會傳給監聽器；

二、$on

1、VM.$on('事件名',callback) --------------------callback回撥$emit要傳送的資料；

2、監聽當前例項上自定義事件；

三、接下來我們通過一個例項來解釋

1、想要實現的

資料重新整理

廢話不多說，上程式碼

以下是子元件

子元件部分程式碼

子元件js部分

父元件程式碼

父元件部分程式碼

父元件js部分

首先簡單的點選事件不同去過多的描述，使用v-on：click就可以了，然後在methods裡寫上判斷就可以實現了。

簡單來說，就是子元件pagination想要傳遞curpage給父元件tabs，父元件需要接收到curpage並且要告知子元件，不然子元件完全不知道。

這裡需要強調的一點是：on和emit事件必須是在一個公共的例項上才能觸發。

子元件說：父元件你挺好了，我用$eimt把資料傳給你啊，你記得看看有沒有拿到啊。

父元件說：好的，不怕，我有$on這個東東，我可以隨時監聽到你傳了啥，你傳給我什麼，我就變成什麼唄，沒辦法，你傳給我的，我是要跟隨你的。

旁白：但是你們兩必須得在一個世界啊，別一個在二次元，一個在三次元，那樣沒法傳啊。這樣吧，你們都必須保證在同一個地方吧。

子元件：好，那我這邊有一個bus，父元件那也有一個bus，那我們兩都到那吧。

旁白：一定要記住你們可以使用一個空的 Vue 例項作為中央事件匯流排。畢竟性別不同怎麼談戀愛啊。

父元件在created裡面定義$on監聽事件在子元件中定義點選事件，呼叫父元件方法通過$emit將相應值傳給父元件

網上百度千篇一律全是使用$emit來實現，可是都有一個嚴重的誤區沒有給別人說明，開始我都按照搜尋的結果進行操作，都會出現子元件$emit後父元件沒有監聽到函式的變化，研究了好久才發現$emit和$on的事件必須在一個公共的例項上，才能夠觸發。我的操作如下：

首先在main.js裡新加bus作為一個公共的例項，如下圖

bus全域性

在子元件中通過$emit觸發元件

在父元件中通過$on監聽元件

angular之$broadcast、$emit、$on傳值

4.6 分享方法一個 ng-click onclick 技術 ctrl onf 文件層級 index.html <!DOCTYPE html> <html ng-app="nickApp"> <head>

vue中$emit與$on

width nts pla b數 2.0 charset set code 位置　　var Event = new Vue();　　　　　　相當於又new了一個vue實例，Event中含有vue的全部方法；　　Event.$emit(‘msg‘,this.msg);　　

寫一個簡單vue 中間件，$emit、$on

發布-訂閱模式 pre 原理 lse 取出 als new on() 訂閱前言使用過vue的同學大多數都知道$emit 與$on的使用。我們僅僅知道使用，有時候是完全不夠的。現在我就帶領大家寫一個簡單類似於vue空實例的中間件。非父子組件的通信非父子組件的通信vue

socket.io中emit和on的用法

1、搭一個server伺服器 var server = require('http').createServer((req, res) => { res.end("111") }); var io = require('socket.io')(se

說一說$emit和$on

一、$emit 1、this $emit（'自定義事件名',要傳送的資料）； 2、觸發當前例項上的事件，要傳遞的資料會傳給監聽器；二、$on 1、VM.$on('事件名',callback) --------------------c

Vuejs 用$emit 與 $on 來進行兄弟元件之間的資料傳輸

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-單一事件管理元件通訊</title> &

vue中$refs、$emit、$on的使用場景

1、$emit的使用場景子元件呼叫父元件的方法並傳遞資料注意：子元件標籤中的時間也不區分大小寫要用“-”隔開子元件： <template> <button @click="emitEvent">點選我</button>

Vue公共廣播/父子元件廣播 $emit、$on的實現及原理解答

vm.$emit( event, […args] ) 引數： {string} event [...args] 觸發當前例項上的事件。附加引數都會傳給監聽器回撥 m.$on( event, callback )

Vuejs 用$emit與$on來進行資料傳輸通訊

Vuejs 用$emit與$on來進行兄弟元件之間的資料傳輸通訊 <!DOCTYPE html> <html lang="en"> <head> <me

angular之$on、$emit、$broadcast

切換 $scope loaded func emit col ams root cnblogs 1.$scope.$on view事件 //View被加載但是DOM樹構建之前時： $scope.$on(‘$viewContentLoading‘, function

nodejs 中on 和 emit

new fun blog nts mov logs class 總結測試首先測試用例： var EventEmitter = require(‘events‘).EventEmitter var life = new EventEmitter(); /

vue2.0 中#$emit,$on的使用詳解

額外 return turn isp div 傳遞 call sele 發的 vue1.0中 vm.$dispatch 和 vm.$broadcast 被棄用，改用$emit,$on 1. vm.$on( event, callback ) 監聽當前實例上的自定義事件。

$on , $emit , $broadcast , $apply

$scope.$on('事件名稱',function(event,data){ 　　//監聽事件 }); $scope.$emit('事件名稱','傳遞的資料');//子元素向父元素髮送事件請求,傳遞資料; $scope.$broadcast('事件名稱','傳遞的資料');//父元素向子元素髮送事件

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

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

vue中的$on，$emit，v-on 三者關係

$on，$emit，v-on 三者關係每個 Vue 例項都實現了事件介面：使用 $on(eventName) 監聽事件使用 $emit(eventName) 觸發事件如果把Vue看成一個家庭（相當於一個單獨的components)，女主人一直在家裡指派($emit)男人做事，

AngularJS $on、$emit和$broadcast簡單功能例項

我們知道，AngularJS的作用域是類似於JavaScript的原型繼承的原理，作用於之間有一定的層次關係。AngularJS的每個作用域都有一個$rootScope的根作用域，其他的作用域繼承於這個作

寫一個eventEmitter類，包括on()、off()、once()、emit()方法

1、on(event,fn)：監聽event事件，事件觸發時呼叫fn函式； 2、once(event,fn)：為指定事件註冊一個單次監聽器，單次監聽器最多隻觸發一次，觸發後立即解除監聽器； 3、emit(event,arg1,arg2,arg3...)：觸發event事件

Vuejs 元件之 $emit 和 v-on 的事件傳遞

<!DOCTYPE html> <html lang="en">

Machine Learning On Spark——第一節：基礎資料結構（一)

作者：周志湖微訊號：zhouzhihubyond 本節主要內容本地向量和矩陣帶類標籤的特徵向量（Labeled point）分散式矩陣 1. 本地向量和矩陣本地向量（Local Vector）儲存在單臺機器上，索引採用0開始的整型表示

【孤獨旅者】Vue-封裝$on,$emit,$off

let EventList = { //key:[] } const $on = (EventName, cb) => { if (!(EventList[EventName])) { EventList[Eve

說一說$emit和$on

一、$emit

二、$on

三、接下來我們通過一個例項來解釋

相關推薦