vue組件通訊的幾種方式

最近用vue開發項目，記錄一下vue組件間通訊幾種方式

第一種，父子組件通訊

一.父組件向子組件傳值

1.建立子組件，在src/components/文件夾下新建一個Child.vue
2.Child.vue的中建立props，而後建立一個名爲message的屬性

 

child.png

3.在App.vue中註冊Child組件，並在template中加入child標籤，標籤中添加message屬性並賦值

 

App2.png

4.保存修改的文件，查看瀏覽器

 

browser.png

5.咱們依然能夠對message的值進行v-bind動態綁定

 

App3.png

此時瀏覽器中

 

browser2.png

父組件向子組件傳值成功
總結一下：

• 子組件在props中建立一個屬性，用以接收父組件傳過來的值
• 父組件中註冊子組件
• 在子組件標籤中添加子組件props中建立的屬性
• 把須要傳給子組件的值賦給該屬性

---

二.子組件向父組件傳值或更新父組件值

1.在子組件中建立一個按鈕，給按鈕綁定一個點擊事件

 

Child2.png

2.在響應該點擊事件的函數中使用$emit來觸發一個自定義事件，並傳遞一個參數

 

Child3.png

3.在父組件中的子標籤中監聽該自定義事件並添加一個響應該事件的處理方法

 

App4.png

4.保存修改的文件，在瀏覽器中點擊按鈕

 

browser3.png

子組件向父組件傳值成功
總結一下：

• 子組件中須要以某種方式例如點擊事件的方法來觸發一個自定義事件
• 將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應自定義事件的方法
• 在父組件中註冊子組件並在子組件標籤上綁定對自定義事件的監聽

在通訊中，不管是子組件向父組件傳值仍是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。抓準這兩點對於父子通訊就好理解了

或者經過  .sync 修飾符    https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

 

 

第二種，利用總線方式能夠平級組件進行通訊

不管是父向子傳值仍是子向父傳值，都須要一箇中間介質。對於平級組件來講其實也同樣，他們也須要一箇中間介質來做爲一箇中央事件總線,

一 .咱們先來建立中央事件總線，在src/assets/下建立一個eventBus.js,內容以下

 

eventBus.png

eventBus中咱們只建立了一個新的Vue實例，之後它就承擔起了組件之間通訊的橋樑了，也就是中央事件總線。

二 . 建立一個firstChild組件，引入eventBus這個事件總線，接着添加一個按鈕並綁定一個點擊事件

 

firstChild.png

咱們在響應點擊事件的sendMsg函數中用$emit觸發了一個自定義的userDefinedEvent事件，並傳遞了一個字符串參數
PS:$emit實例方法觸發當前實例(這裏的當前實例就是bus)上的事件,附加參數都會傳給監聽器回調。

三 . 咱們再建立一個secondChild組件，引入eventBus事件總線，並用一個p標籤來顯示傳遞過來的值

 

secondChild.png

咱們在mounted中，監聽了userDefinedEvent,並把傳遞過來的字符串參數傳遞給了$on監聽器的回調函數
PS:
mounted:是一個Vue生命週期中的鉤子函數，簡單點說就相似於jquery的ready，Vue會在文檔加載完畢後調用mounted函數。
$on:監聽當前實例上的自定義事件(此處當前實例爲bus)。事件能夠由$emit觸發，回調函數會接收全部傳入事件觸發函數($emit)的額外參數。

四 . 在父組件中，註冊這兩個組件，並添加這兩個組件的標籤

 

App2.png

保存全部修改的文件，而後打開瀏覽器窗口，內容以下(css請自行處理)

 

browser.png

點擊向組件傳值按鈕，咱們能夠看到傳值成功

 

browser2.png

---

總結：

• 建立一個事件總線，例如demo中的eventBus，用它做爲通訊橋樑
• 在須要傳值的組件中用bus.$emit觸發一個自定義事件，並傳遞參數
• 在須要接收數據的組件中用bus.$on監聽自定義事件，並在回調函數中處理傳遞過來的參數

參考原文：https://www.jianshu.com/p/2670ca096cf8，https://www.jianshu.com/p/d946bd7c26f4

第三種 vue高級組件之provide / inject

provide / inject 是 2.2 新增的方法，能夠以一個祖先組件向全部子孫後代注入依賴（一個內容）。

provider/inject：簡單的來講就是在父組件中經過provider來提供變量，而後在子組件中經過inject來注入變量。

以上二者能夠在父組件與子組件、孫子組件、曾孫子...組件數據交互，也就是說不只限於prop的父子組件數據交互，只要在上一層級的聲明的provide，那麼下一層級不管多深都可以經過inject來訪問到provide的數據

1.父級組件以下

<template>
<div class="test">
<son prop="data"></son>
</div>
</template>

<script>
export default {
name: 'Test',
provide: {
name: 'Garrett'
}
}
 2.孫子組件，注意這裏是孫子組件，父級 -> 子組件 -> 孫子組件三個層級關係

<template>
<div>
{{name}}
</div>
</template>

<script>
export default {
name: 'Grandson',
inject: [name]
}
</script>
這裏能夠經過inject直接訪問其兩個層級上的數據，其用法與props徹底相同，一樣能夠參數校驗等

過去用的 event-bus 雖然能夠解決深層問題，可是會致使整個 event-emit 組成過於混亂，難以維護。使用 provide / inject 能夠保證父子單向數據流的清晰性。

在 React 中 Context 的 Provider / Consumer 也有相同的效果，因爲尚未具體使用過，對 React 自己也只有一面之緣，留待之後在瞭解，感興趣的同窗能夠 閱讀文檔 瞭解。

 

固然它的做用還有不少，好比vue 路由參數變化，頁面不刷新，provide /inject 完美解決方案（https://blog.csdn.net/weixin_36934930/article/details/80552333）

參考原文：https://blog.csdn.net/Garrettzxd/article/details/81407199

第四種 vuex

狀態管理模式、集中式存儲管理 一聽就很高大上，蠻嚇人的。在我看來 vuex 就是把須要共享的變量所有存儲在一個對象裏面，而後將這個對象放在頂層組件中供其餘組件使用。這麼說吧，將vue想做是一個js文件、組件是函數，那麼vuex就是一個全局變量，只是這個「全局變量」包含了一些特定的規則而已。

在vue的組件化開發中，常常會遇到須要將當前組件的狀態傳遞給其餘組件。父子組件通訊時，咱們一般會採用 props + emit 這種方式。但當通訊雙方不是父子組件甚至壓根不存在相關聯繫，或者一個狀態須要共享給多個組件時，就會很是麻煩，數據也會至關難維護，這對咱們開發來說就很不友好。vuex 這個時候就很實用，不過在使用vuex以後也帶來了更多的概念和框架，需慎重！

vuex裏面都有些什麼內容？

Talk is cheap,Show me the code. 先來一段代碼間隔下這麼多的文字：

const store = new Vuex.Store({ state: { name: 'weish', age: 22 }, getters: { personInfo(state) { return `My name is ${state.name}, I am ${state.age}`; } } mutations: { SET_AGE(state, age) { commit(age, age); } }, actions: { nameAsyn({commit}) { setTimeout(() => { commit('SET_AGE', 18); }, 1000); } }, modules: { a: modulesA } }

這個就是最基本也是完整的vuex代碼；vuex 包含有五個基本的對象：

• state：存儲狀態。也就是變量；
• getters：派生狀態。也就是set、get中的get，有兩個可選參數：state、getters分別能夠獲取state中的變量和其餘的getters。外部調用方式：store.getters.personInfo()。就和vue的computed差很少；
• mutations：提交狀態修改。也就是set、get中的set，這是vuex中惟一修改state的方式，但不支持異步操做。第一個參數默認是state。外部調用方式：store.commit('SET_AGE', 18)。和vue中的methods相似。
• actions：和mutations相似。不過actions支持異步操做。第一個參數默認是和store具備相同參數屬性的對象。外部調用方式：store.dispatch('nameAsyn')。
• modules：store的子模塊，內容就至關因而store的一個實例。調用方式和前面介紹的類似，只是要加上當前子模塊名，如：store.a.getters.xxx()。

vue-cli中使用vuex的方式

通常來說，咱們都會採用vue-cli來進行實際的開發，在vue-cli中，開發和調用方式稍微不一樣。

├── index.html ├── main.js ├── components └── store ├── index.js # 咱們組裝模塊並導出 store 的地方 ├── state.js # 跟級別的 state ├── getters.js # 跟級別的 getter ├── mutation-types.js # 根級別的mutations名稱（官方推薦mutions方法名使用大寫） ├── mutations.js # 根級別的 mutation ├── actions.js # 根級別的 action └── modules ├── m1.js # 模塊1 └── m2.js # 模塊2

state.js示例：

const state = { name: 'weish', age: 22 }; export default state;

getters.js示例（咱們通常使用getters來獲取state的狀態，而不是直接使用state）：

export const name = (state) => { return state.name; } export const age = (state) => { return state.age } export const other = (state) => { return `My name is ${state.name}, I am ${state.age}.`; }

mutation-type.js示例（咱們會將全部mutations的函數名放在這個文件裏）：

export const SET_NAME = 'SET_NAME'; export const SET_AGE = 'SET_AGE';

mutations.js示例：

import * as types from './mutation-type.js'; export default { [types.SET_NAME](state, name) { state.name = name; }, [types.SET_AGE](state, age) { state.age = age; } };

actions.js示例（異步操做、多個commit時）：

import * as types from './mutation-type.js'; export default { nameAsyn({commit}, {age, name}) { commit(types.SET_NAME, name); commit(types.SET_AGE, age); } };

modules--m1.js示例（若是不是很複雜的應用，通常來說是不會分模塊的）：

export default { state: {}, getters: {}, mutations: {}, actions: {} };

index.js示例（組裝vuex）：

import vue from 'vue'; import vuex from 'vuex'; import state from './state.js'; import * as getters from './getters.js'; import mutations from './mutations.js'; import actions from './actions.js'; import m1 from './modules/m1.js'; import m2 from './modules/m2.js'; import createLogger from 'vuex/dist/logger'; // 修改日誌 vue.use(vuex); const debug = process.env.NODE_ENV !== 'production'; // 開發環境中爲true，不然爲false export default new vuex.Store({ state, getters, mutations, actions, modules: { m1, m2 }, plugins: debug ? [createLogger()] : [] // 開發環境下顯示vuex的狀態修改 });

最後將store實例掛載到main.js裏面的vue上去就好了

import store from './store/index.js'; new Vue({ el: '#app', store, render: h => h(App) });

在vue組件中使用時，咱們一般會使用mapGetters、mapActions、mapMutations，而後就能夠按照vue調用methods和computed的方式去調用這些變量或函數，示例以下：

 

參考原文：https://segmentfault.com/a/1190000012015742以上就是嘗試過的vue組件幾種通訊方式import {mapGetters, mapMutations, mapActions} from 'vuex'; /* 只寫組件中的script部分 */ export default { computed: { ...mapGetters([ 'name', 'age' ]) }, methods: { ...mapMutations({ setName: 'SET_NAME', setAge: 'SET_AGE' }), ...mapActions([ nameAsyn ]) } };