vue元件之間的多種通訊方法

vue是一種mvvm框架，它相對於jquery可能比較大的差異點之一就在於元件之間的通訊了。這裡提供三種不同情況下vue元件的通訊方式。

一. vue父子元件通訊

vue父子元件通訊可以用vue.$emit自定義事件來解決。

// 父元件

"editaddress">single-address>

// 子元件
methods: 
}

當然也可以使用props方式解決。

// 父元件
"addressitems">
// 子元件
}}export
default 
}

二. 非父子元件通訊

非父子元件通訊同樣也可以用vue.$emit自定義事件來解決

var bus = new vue()
// 元件a
bus.$emit('id-selected', 1)
// 元件b
bus.$on('id-selected', function
(id)
)

三. vue跨元件跨模組通訊

雖然父子元件，非父子元件間的通訊vue都可以有辦法解決，但是如果專案結構複雜化以後，這樣的自定義事件變多以後**難以管理，所以還是建議使用vuex。

接下來就講一講vuex這個東西吧。vuex，官方的說法就是vuex 是乙個專為 vue.js 應用程式開發的狀態管理模式。如果之前沒有接觸過應用狀態管理這一塊的內容的話，可能光看文件是很難看明白的。按個人的理解來說，vuex最大的作用就是把部分父子元件之間頻繁的通訊過程簡單化，所以，對於一些父子元件通訊並不頻繁的情況來說，並不應該使用vuex，當然這也意味著，如果你對父子元件之間的通訊還不是很明確的話，可以先學習一下這一塊的知識。

vuex有四個核心概念，其中state和getters主要是用於資料的儲存與輸出，而mutations和actions是用於提交事件並修改state中的資料。

也是以購物車的業務來舉例，首先由於vue的限制，頁面中所有的資料都需要乙個初始化，這樣才能在之後業務邏輯中響應式地修改資料（修改資料的同時變化頁面內容）。這裡我們可以在vue元件中使用ajax獲取資料，獲取到的資料直接賦給state中的資料：

// global.domain.centerurl是我自己定義的全域性變數，這種就可以更方便的管理前端資料請求介面的位址了
getdatafrombackend () ).then(function (response) )
}

getters的用法與計算屬性基本一致，computed會用的話那這個也基本就會用了。

接下來就是重頭戲mutations了。mutations原意是突變，這裡可以理解為立即修改吧。也就是說，mutations可以修改state中的資料，但是有乙個限制，那就是只能同步修改，而不能非同步，你想要按個定時器過2秒鐘修改state，那對不起了您哪，不行。但是，想要非同步修改state，也不是不行，光靠mutations乙個人是不行的了，還得要靠actions，而且actions還不能直接操作state，他需要非同步提交給mutations，然後再由mutations同步修改state資料。聽上去挺麻煩的一件事情啊，還是直接看**吧。

mutations: ,
modifyifcollect (state) ,
// 收藏成功事件
collectsuccess (state) ,
// 取消收藏事件
collectcancel (state) 
},actions: ) , 2000)
} else , 2000)}}
}

// 假如有資料需要從元件傳到actions中時，需要兩個大括號，第乙個大括號放commit或者state這類vuex引數，而第二個大括號放傳進來的引數 // 這裡使用vuex actions呼叫了兩個mutations的方法實現乙個功能，是因為第二個函式中有乙個引數是需要第乙個函式提供的

changepos (, )

總的來說，在我看懂了vuex以後，我總是覺得有乙個vuex來分擔一下data的功能那是再好不過了，這樣不光能夠更好地管理我的應用，同時也能夠提高我.vue單檔案的可讀性。

那麼這裡就有乙個問題了，我們都知道乙個稍微大一點的專案，那資料量都是很多的，如果整個專案裡的資料都寫在乙個vuex檔案裡的話就顯得整個檔案太大太重了，這與我們想要提高檔案的可讀性是相悖的。所以我們需要有乙個分模組的意識來管理vuex，管理應用的狀態。

而vuex也正好提供了這個功能（vuex還真的是夠強大），在具體使用的過程中，我會先把那些需要與其他元件互動的元件中的資料都提取出來放到vuex裡面管理，而那些完全沒有互動的資料還是放在元件的data中，例如標識該元件的標題資料等等。然後，這裡我們就可以用到vuex的模組管理功能，愉快地把資料按照元件之間的功能聯絡來分離，並把它們拆分到乙個個小檔案中啦。

// 這是vuex總的管理檔案，將各模組統一在一起，從而將每乙個分支都連線到vuex這個總的狀態樹上
// 引入vue
import vue from
'vue'
// 引入vuex
import vuex from
'vuex'
// 引入應用狀態管理
import goodshandlestore from
'./goodshandle'
import orderstore from
'./order'
import addressstore from
'./address'
import shopcarstore from
'./shopcar'
import merchantstore from
'./merchant'
import couponstore from
'./coupon'
vue.use(vuex)
export
default
new vuex.store(
})

vue元件之間的多種通訊方法

vue元件之間的多種通訊方法

Vue 父子元件之間的多種通訊方法，簡單易用

Vue 非父子元件之間的多種通訊方法，簡單易用

vue元件之間的多種通訊方法

vue元件之間的多種通訊方法

Vue 父子元件之間的多種通訊方法，簡單易用

Vue 非父子元件之間的多種通訊方法，簡單易用

相關推薦