我們知道父子元件直接的資料傳遞通過標籤屬性行間 將資料掛在到了標籤上
子元件中通過props特性驗證來獲取來自父元件的資料 進行渲染
在非父子元件中也借用這樣的原理 原理圖如下
特點 ： 傳值要經過父元件 不斷尋找各元件之間的從屬關係 操作複雜 適合一層 父子兄弟元件傳遞
**如下：
//子元件1傳值到父元件
請輸入//父元件
//子元件2接受資料
你的資料
特點： 當每個元件獲取資料時 需要在生命週期函式create（）函式中註冊來自原型上的自定義事件，當元件多時 需要監聽的事件太多 適合少量的元件使用（不同層之間也可以）
**如下
vue.prototype.state = new vue();
//例項物件原型上新增新的vue物件 為所有vue元件共有 兄**元件可以直接使用 不用經過父元件
子元件1
請輸入//子元件2
你的資料
vuex 作為乙個公共資料池裡面的資料供任意元件使用使用規則
注意1、各個元件獲取資料池中資料方法 this.$store.state.***
2、因為涉及資料變化 建議在子元件中使用計算屬性來接收資料 （接收資料的三種方式）
//第一種
computed:
},//第二種
computed:mapstate(['name','age','look']),
//第三種
computed:)
},
3、鑑於計算屬性返回資料的繁瑣引入了mapstate物件
該物件用於對來自資料池的資料進行操作
vuex getters（相當於計算屬性）
運用場景如下 當子元件需要的資料要進行加工時 如果使用state中的資料會影響其他元件的資料 此時可以在getters中處理
state相當於data 一般存放固定資料 只有當兩個元件的資料變化是同步的時候才可以同時引用data 你變化我也變化
注意：子元件引用時候要區別於state中箭頭函式形式 直接填寫變數名你就行了
其次getters還可以新增引數如下所示 ，無論是state getters本質上都是物件 可以一物件形式訪問各個池中的資料
vuex store中
getters: ,
caonima()
},//元件中
computed:),
...mapgetters()
},
到此為止不僅僅利用vuex進行資料處理 到這裡開始使用方法函式
注意 當在非嚴格模式下可以在mutations之外進行state資料池中資料改動 但是es5嚴格模式下報錯
語法規則：對於mutations引數而言 第乙個引數為vuex物件本身 從第二個引數開始為自定義引數
多個引數傳遞要以物件模式進行接收時也是物件模式 mutations中的方法相當於乙個自定義事件 需要使用者主動觸發
在mutations中處理同步事件而言可以處理利用commit方法觸發，但是如果mutations中含有非同步事件就會報錯 不再是同乙個作用域 例如定時器
利用actions可以解決這個問題 該函式內部通過定義方法來處理非同步事件 原理就是在actions模組中非同步觸發mutations模組中的方法，在需要的地方不再利用commit觸發mutations中的方法而是觸發actions裡面方法
具體**如下
Vue父子元件之間和非父子元件之間傳值
父元件呼叫子元件的時候，繫結動態屬性 title v header 在子元件裡面通過props接收父元件傳過來的資料，props title 或者 props 直接在子元件中使用 呼叫子元件的時候定義乙個ref header v header 在父元件中通過 this refs.header.屬性 ...
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 ...