說明：下面我總結(jié)了比較常用的vue組件之前通信的方式，最近準(zhǔn)備面試，所以有些總結(jié)貼上來分享

props和$emit

只有父子關(guān)系才可以用這種方式，父組件向子組件傳遞參數(shù)用props，子向父傳遞使用觸發(fā)$emit自定義事件

1.props

<!-- parent.vue, 可以傳遞`靜態(tài)`的props和`動(dòng)態(tài)`的props, 靜態(tài)的參數(shù)只能是個(gè)String類型的，如果是其他類型的一定要記得加`:`來表示這是一個(gè) js 表達(dá)式而不是一個(gè)字符串 --><Child :name='name' :age='18' address='xxxxx'></Child>...data () { return { name: ’marry’ }}<!-- 傳一個(gè)參數(shù)所有props, 雖然目前我沒有這個(gè)需求，使用不帶參數(shù)的 v-bind --><blog-post v-bind='post'></blog-post>post: { id: 1, title: ’My Journey with Vue’}//等價(jià)于下面<blog-post v-bind: v-bind:title='post.title'></blog-post><!-- child.vue -->...//以字符串?dāng)?shù)組形式列出的 propprops: [’name’, ’age’, ’address’]//prop驗(yàn)證, 當(dāng) prop 驗(yàn)證失敗的時(shí)候，(開發(fā)環(huán)境構(gòu)建版本的) Vue 將會產(chǎn)生一個(gè)控制臺的警告//注意：以下類型不能寫成’String’這種帶引號的形式props: { // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會通過任何類型驗(yàn)證) propA: Number, // 多個(gè)可能的類型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 帶有默認(rèn)值的數(shù)字 propD: { type: Number, default: 100 }, // 帶有默認(rèn)值的對象 propE: { type: Object, // 對象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取 default: function () { return { message: ’hello’ } } }, // 自定義驗(yàn)證函數(shù) propF: { validator: function (value) { // 這個(gè)值必須匹配下列字符串中的一個(gè) return [’success’, ’warning’, ’danger’].indexOf(value) !== -1 } }}//注意那些 prop 會在一個(gè)組件實(shí)例創(chuàng)建之前進(jìn)行驗(yàn)證，所以實(shí)例的 property (如 data、computed 等) 在 default 或 validator 函數(shù)中是不可用的。

2.$emit

<!-- parent.vue --><Child @my-event='myEvent'></Child>...methods: { myEvent(name){ this.name = name }}<!-- child.vue --><div> <button @click='$emit(’my-event’, name)'></button></div>//使用自定義事件將子組件的值拋給父組件

中央事件總線 bus

用于解決跨級和兄弟組件通信問題，巧妙的使用一個(gè)公共的vue實(shí)例，利用$on, $emit, $off(移除自定義事件監(jiān)聽器)

方法一：

可以在main.js中，在Vue的原型上掛載一個(gè)公共的Vue實(shí)例 $bus，這樣全局任何一個(gè)地方都可以使用

Vue.prototype.$bus = new Vue()

然后在需要的地方注冊自定義事件和接收參數(shù)的回調(diào)函數(shù)

this.$bus.$on(’changeName’, name => { this.name = name})

在需要改變的時(shí)候觸發(fā)事件并拋出參數(shù)

this.$bus.$emit(’changeName’, ’wzj’)

方法二：

定義一個(gè)util.js文件

import Vue from ’vue’const bus = new Vue()export default bus

在需要用到bus的文件中引入

import bus from ’../util’ //文件路徑不一定//在一個(gè)文件定義事件bus.$on(’changeName’, name => { this.name = name})//另一個(gè)文件拋出參數(shù)bus.$emit(’changeName’, ’wzj’)

vuex

對于項(xiàng)目比較復(fù)雜，多組件共享狀態(tài)，不同層級需要通信

核心概念：

state, getter, mutation, action, module

//store/index.jsimport Vue from ’vue’import Vuex from ’vuex’Vue.use(Vuex)export dafault new Vuex.Store({ state: { name: ’’, age: 0 }, getters: { tranName(state){ return ’name: ’ + state.name } }, mutations: { changeName(state, name){ state.name = name } }, /*Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters */ actions: { //異步函數(shù)，但還是要通過提交commit觸發(fā)mutations函數(shù)操作state changeName(context, name){ context.commit(’changeName’, name) } }, modules: {}})

在組件中使用

方法一：

//訪問state屬性this.$store.state.name//訪問getters屬性this.$store.getters.tranName//訪問mutationsthis.$store.commit(’changeName’, ’wzj’)//訪問actionsthis.$store.dispatch(’changeName’, ’wzj’)

方法二：使用輔助函數(shù)映射到本地，這里只列舉了簡便的方式，更多查閱官網(wǎng)吧

import {mapState, mapGetters, mapMutations, mapActions} from ’vuex’//state 和 getters 映射到本地的computed屬性中，作為計(jì)算屬性使用computed: { ...mapState([’name’, ’age’]), ...mapGetters([’tranName’])}//mutations 和 actionsmethods: { // 將 `this.changeName()` 映射為 `this.$store.commit(’changeName’)` ...mapMutations([’changeName’]) // 將 `this.changeName()` 映射為 `this.$store.dispatch(’changeName’)` ...mapActions([’changeName’])}

$attrs 和 $listeners

父組件與后代組件，用以上方法有點(diǎn)大材小用或者第一種有些不方便

$attrs 包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 綁定 ( class 和 style 除外)。當(dāng)一個(gè)組件沒有聲明任何 prop 時(shí)，這里會包含所有父作用域的綁定 ( class 和 style 除外)，并且可以通過 v-bind='$attrs' 傳入內(nèi)部組件。 $listeners 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on='$listeners' 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用。

例子：

//app.vue<div> <One name='wzj' :age='age' address='xian' @changeAge='changeAge'></One></div>...data(){ return { age: 10 }},methods: { changeAge(age){ this.age = age }}//one.vue<div> <div>姓名：{{ name }}</div> <div>年齡：{{ age }}</div> <Two v-bind='$attrs' v-on='$listeners'></Two> <button @click='change'>點(diǎn)我2</button></div>...props: [’name’, ’age’],//two.vue<div> <div>{{ address }}</div> <button @click='change'>點(diǎn)我2</button></div>...props: [’address’], //用$attrs傳遞到最后的屬性，在使用的時(shí)候還是要聲明propsmethods: { change(){ this.$emit(’changeAge’, 30) }}

理解：其實(shí)祖先組件的屬性和事件還是一層層往下傳，不過用$attrs 和 $listeners優(yōu)化和簡便了傳遞過程中書寫，而且在傳遞的過程中，任何一個(gè)聲明了 $listeners的組件都可以觸發(fā)里面的所有事件，而聲明了$attrs的組件只能使用之前未用props聲明的剩下的屬性。

以上就是vue組件之間的通信的詳細(xì)內(nèi)容，更多關(guān)于vue 組件通信的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！