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

方法

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

bus.js

import vue from 'vue'

/** * 定義空的vue例項，作為 eventbus實現非父子元件之間的通訊(vue2.x中去掉了broadcast)
*/let eventbus = new vue({});
export default eventbus;

乙個元件建立資料

import bus from 'bus.js'

methods:
}

import bus from 'bus.js'

mounted:); 
}

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

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

window.localstorage.setitem("vuedata",666);

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.在父元件中的子元件標...