Vue 2 0學習筆記 事件匯流排

2021-09-26 21:37:52 字數 529 閱讀 6494

我們知道,在乙個vue專案中,我們會使用vuex去進行乙個狀態的管理或者資料的傳遞,除了vuex還有什麼方法可以進行資料的傳遞?

eventbus(事件匯流排)

主要是現實途徑是在要相互通訊的兄弟元件之中,都引入乙個新的vue例項,然後通過分別呼叫這個例項的事件觸發和監聽來實現通訊和引數傳遞。

1、建立bus.js

import vue from 'vue';
export default new vue(); 

這個js只有兩行**

在需要通訊的元件中import bus ,

使用事件來進行傳遞

如需要從a.vue中傳遞資料到b.vue

在a.vue中加入

bus.$emit('事件名稱',data);(data為要傳遞的資料)去觸發事件

在b.vue中使用bus.$on('剛才定義的事件名稱',data =>),去進行監聽事件並且接收引數

之後需要手動清除事件,在生命週期銷毀的時候去bus.$off('事件名稱') 

(一)vue2 0學習筆記

官方api位址 引用 body標籤的閉合標籤上面 2.1.0 新增 用法 繫結事件 事件型別由引數指定。表示式可以是乙個方法的名字或乙個內聯語句,如果沒有修飾符也可以省略。用在普通元素上時,只能監聽原生 dom 事件。用在自定義元素元件上時,也可以監聽子元件觸發的自定義事件。在監聽原生 dom 事件...

vue2 0學習記錄

1 在main.js可註冊全域性元件,vue.components 元件名稱 元件名 import 元件名 from components 元件檔案 3 元件的標籤名不可與系統的html標籤重複 4 父元件向子元件傳值 父元件有乙個陣列 users 在父元件模板中的子元件標籤中接收 users us...

Vue2 0學習之路

一 基礎 1.vue2.0學習記錄 hello world 2.vue2.0學習記錄 todo list初步 3.vue2.0學習記錄 mvvm模式 4.vue2.0學習記錄 全域性元件 5.vue2.0學習記錄 區域性元件 6.vue2.0學習記錄 父子元件傳值 7.vue2.0學習記錄 生命週期...