2. 程式人生 > >vue元件通訊的幾種方式

vue元件通訊的幾種方式

阿新 • • 發佈：2018-12-18

最近用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中的屬性。抓準這兩點對於父子通訊就好理解了
第二種，利用匯流排方式可以平級元件進行通訊 無論是父向子傳值還是子向父傳值，都需要一箇中間介質。對於平級元件來說其實也一樣，他們也需要一箇中間介質來作為一箇中央事件匯流排,
一 .我們先來建立中央事件匯流排，在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元件幾種通訊方式，總結下，以免後面忘記

相關推薦

Vue載入元件、動態載入元件的幾種方式

https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async.html 上述內容可以通過 Vue 的 <component> 元素加一

Android activity間通訊幾種方式

read flag 進程 destroy ads sage on() sting ogl Activity 通訊 Bundle 我們可以通過將數據封裝在Bundle對象中 ，然後在Intent跳轉的時候攜帶Bundle對象 bundle 本質上是使用 arrayMap實現

Android程序間通訊 - 幾種方式的對比總結

什麼是RPC RPC（Remote Procedure Call）即遠端過程呼叫，它是一種通過網路從遠端計算機程式上請求服務，在不需要了解底層網路技術的協議下，即可獲取計算機程序中的資料。RPC使得開發包括網路分散式多程式在內的應用程式更加容易。 RPC在OSI網路通訊7層模型中

spring給容器中註冊元件的幾種方式,1.包掃描+元件標註註解[email protected](

              給容器中註冊元件；        1）、包掃描+元件標註註解（@Controller/@Service/@Repository/@Component）[

Winform遍歷視窗的所有控制元件（幾種方式實現）

C#遍歷窗體所有控制元件或某型別所有控制元件 //遍歷窗體所有控制元件， foreach (Control control in this.Controls) { //遍歷後的操作... control.Enabled = false; } 遍歷某個panel的所有控制元件

vue元件通訊的幾種方式

最近用vue開發專案，記錄一下vue元件間通訊幾種方式 第一種，父子元件通訊 一.父元件向子元件傳值 1.建立子元件，在src/components/資料夾下新建一個Child.vue 2.Child.vue的中建立props，然後建立一個名為message的屬性

詳解vue中的元件通訊的幾種方式（一）

 在另一篇文章我們會談及祖父孫三級之間的通訊，傳送門：vue元件通訊的方式（二） 1.父元件向子元件傳值（繫結屬性）： 首先我們定義一個父元件father.vue： <template> <div> <h1>父元件</h1

vue常用建立元件幾種方式總結

最近一週需要使用vue開發一個谷歌擴充套件外掛，但是又不能在vue-cli腳手架中開發，所以只能單獨引入vue.js整個包進行指令碼植入開發。引入vue.js就代表著不能用import、require之類的引入單檔案元件檔案，只能在檔案中開發，或者多個js檔案分先後順序植入開發，然後就出現了一個尷尬

關於Vue下元件引入第三方外部Js幾種方式

第一種方式：利用Vue的mounted生命週期 const oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.src = '//g.alicdn.com/sd/smartCap

VUE元件定義的幾種方式

(1)                 區域性註冊 var app ={ //app是元件的模板名 templete:'<div>我是元件的模板,但我不知道我是那個元件的模板,在這裡你可以敲出你想要顯示的內容 例

Vue元件間通訊6種方式

摘要： 總有一款合適的通訊方式。 作者：浪裡行舟 Fundebug經授權轉載，版權歸原作者所有。 前言 元件是 vue.js

Android線程間通訊的幾種方式

not asynctask gen andro ttext eth pub nbsp delayed 1.runOnUiThread(Runnable) 在子線程中直接使用該方法，可以更新UI runOnUiThread(new Runnable

Linux程序間通訊IPC的幾種方式簡介

Linux程序通訊的源頭       linux下的程序通訊手段基本上是從Unix平臺上的程序通訊手段繼承而來的。而對Unix發展做出重大貢獻的兩大主力AT&T（原為American Telephone & Tele

vue使用axios的幾種方式

方式一：將axios改寫為vue的原型屬性 1、安裝axios npm install vue-axios --save 2、main.js檔案 import axios from 'axios' Vue.prototype.$http = axios 3、.vue檔案

程序間通訊的幾種方式的介紹及比較

程序間通訊 就是在不同程序之間傳播或交換資訊，那麼不同程序之間存在著什麼雙方都可以訪問的介質呢？程序的使用者空間是互相獨立的，一般而言是不能互相訪問的，唯一的例外是共享記憶體區。但是，系統空間卻是“公共場所”，所以核心顯然可以提供這樣的條件。除此以外，那就是雙方都可以訪問的外設了。在這個意義上，兩個

Vue指令v-for之遍歷陣列，json物件的幾種方式

定義資料：   <script>     new Vue({         el:"#test",         data:{      

前端跨域通訊的幾種方式

一、JSONP 我們都知道script標籤src屬性中的連結卻可以訪問跨域的js指令碼，利用這個特性，服務端不再返回JSON格式的資料，而是返回一段呼叫某個函式的js程式碼，在src中進行了呼叫函式來獲取到資料，函式中的引數就是我們需要的資料，這樣實現了跨域。 基本思想是： 1、客戶端利

java間執行緒通訊的幾種方式（II）

1.如何讓兩個執行緒嫩能夠交叉執行 要讓執行緒能夠交叉執行，需要用到鎖。看如下程式碼： package Test;/** /** * @author Administrator wangtao * @createdate 2017-10-10 */ public class

java 執行緒間通訊的幾種方式

1.如何讓兩個執行緒依次執行 假設有兩個執行緒，一個執行緒A,一個執行緒B，兩個執行緒分別依次列印 1-3 三個數字即可。 package Test;/** /** * @author Administrator * @createdate 2017-10-10 */ pu

Angular學習（二）元件互動的幾種方式

通過@Input()，從父元件傳資料到子元件 在子元件中通過 @Input() 裝飾器修飾的屬性，在父元件裡可以引用並傳遞資料 // 子元件 export class Hero { name: