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的方式去調用這些變量或函數，示例如下：

 

import {mapGetters, mapMutations, mapActions} from 'vuex'; /* 只寫組件中的script部分 */ export default { computed: { ...mapGetters([ 'name', 'age' ]) }, methods: { ...mapMutations({ setName: 'SET_NAME', setAge: 'SET_AGE' }), ...mapActions([ nameAsyn ]) } };

參考原文：https://segmentfault.com/a/1190000012015742
以上就是嘗試過的vue組件幾種通信方式