vue是一種mvvm框架,它相對於jquery可能比較大的差異點之一就在於元件之間的通訊了。這裡提供三種不同情況下vue元件的通訊方式。
一. vue父子元件通訊
vue父子元件通訊可以用vue.$emit自定義事件來解決。
// 父元件
address @edit-address="editaddress">address>
// 子元件
methods:
}
當然也可以使用props方式解決。
// 父元件
// 子元件
}}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是一種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...