vue是一種mvvm框架，它相對於jquery可能比較大的差異點之一就在於元件之間的通訊了。這裡提供三種不同情況下vue元件的通訊方式。
一. vue父子元件通訊
vue父子元件通訊可以用vue.$emit自定義事件來解決。
// 父元件
address @edit-address="editaddress">address>
// 子元件
methods:
}
// 父元件
// 子元件
}}export default
}
非父子元件通訊同樣也可以用vue.$emit自定義事件來解決
var bus = new vue()
// 元件a
bus.$emit('id-selected', 1)
// 元件b
bus.$on('id-selected', function
(id)
)
雖然父子元件，非父子元件間的通訊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) )
}
接下來就是重頭戲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，管理應用的狀態。
而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是一種mvvm框架，它相對於jquery可能比較大的差異點之一就在於元件之間的通訊了。這裡提供三種不同情況下vue元件的通訊方式。一.vue父子元件通訊 vue父子元件通訊可以用vue.emit自定義事件來解決。父元件 editaddress single address 子元件 method...
Vue 父子元件之間的多種通訊方法，簡單易用
父元件傳值到子元件 方法 一 父元件的資料直接繫結到子元件上面，在子元件就可以通過頁面的props直接用父元件的資料了 注意 這種方法是單向繫結，子元件不能改變父元件的值 父元件傳遞 子元件接收 props 方法 二 父元件和子元件之間通過v model實現資料的雙向繫結 注意 這種方法是雙向繫結，...
Vue 非父子元件之間的多種通訊方法，簡單易用
方法 一 通過vue提供的bus.js進行通訊，實現資料的傳遞和聯動 bus.js import vue from vue 定義空的vue例項，作為 eventbus實現非父子元件之間的通訊 vue2.x中去掉了broadcast let eventbus new vue export defaul...