方法
一、通過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.在父元件中的子元件標...