Vue 非父子元件之間的多種通訊方法,簡單易用

2021-08-25 08:45:55 字數 915 閱讀 9094

方法

一、通過vue提供的bus.js進行通訊,實現資料的傳遞和聯動

bus.js

import vue from 'vue'

/** * 定義空的vue例項,作為 eventbus實現非父子元件之間的通訊(vue2.x中去掉了broadcast)

*/let eventbus = new vue({});

export default eventbus;

注意:bus一定要在乙個元件能先去建立 $emit,然後另乙個元件再去接收 $on

乙個元件建立資料

import bus from 'bus.js'

methods:

}

另乙個元件接收資料

import bus from 'bus.js'

mounted:);

}

方法

二、通過瀏覽器本地儲存localstorage進行通訊

通過setitem設定乙個key為vuedata,value為666的本地儲存

window.localstorage.setitem("vuedata",666);
通過getitem獲取乙個key為vuedata的本地儲存

window.localstorage.getitem("vuedata");
方法

三、對於資料量較大的資料的處理,推薦使用vuex

Vue 非父子元件之間的通訊

實現非父子元件之間的通訊,有以下幾種方式 第一種是最常用的,此處只介紹第一種。bus匯流排實現非父子元件之間的通訊 div id div script 建立乙個空的vue物件作為bus 事件匯流排 vue.prototype.bus new vue vue.component myheader vu...

Vue非父子元件之間的通訊

非父子元件的通訊一般有兩種方法,一種是通過eventhub,也就是建立乙個空的vue物件作為元件間通訊的介質 另一種則是通過vuex狀態管理。這裡介紹的是第一種方法。先貼上 1 div id 2 foo foo 3 bar bar 4div 56 template id foo 7 div 8 p ...

vue的父子元件以及非父子元件之間的通訊方式

父傳子 prop 自定義屬性,將父親的資料傳給兒子 1.在元件標籤上使用自定屬性 2.在元件內部通過props來接收自定義屬性 3.子元件接收後既可以在元件裡直接使用,不過只能用不能改 父元件 子元件 這裡是元件 子傳父 emit emit 可以觸發繫結在元件身上自定義事件 1.在父元件中的子元件標...