在應用復雜時，推薦使用vue官網(wǎng)推薦的vuex，以下討論簡單SPA中的組件間傳值。

一、路由傳值

路由對象如下圖所示：

在跳轉(zhuǎn)頁面的時候，在js代碼中的操作如下，在標簽中使用<router-link>標簽

this.$router.push({            name: 'routePage',            query/params: {              routeParams: params            }          }) 

需要注意的是，實用params去傳值的時候，在頁面刷新時，參數(shù)會消失，用query則不會有這個問題。

這樣使用起來很方便，但url會變得很長，而且如果不是使用路由跳轉(zhuǎn)的界面無法使用。

二、通過$parent,$chlidren等方法調(diào)取用層級關(guān)系的組件內(nèi)的數(shù)據(jù)和方法

通過下面的方法調(diào)用：

this.$parent.$data.id //獲取父元素data中的idthis.$children.$data.id //獲取父元素data中的id 

這樣用起來比較靈活，但是容易造成代碼耦合性太強，導致維護困難

三、通過eventBus傳遞數(shù)據(jù)

使用前可以在全局定義一個eventBus

window.eventBus = new Vue(); 

在需要傳遞參數(shù)的組件中，定義一個emit發(fā)送需要傳遞的值，鍵名可以自己定義（可以為對象）

eventBus.$emit('eventBusName', id); 

在需要接受參數(shù)的組件重，用on接受該值（或?qū)ο螅?/p>

//val即為傳遞過來的值eventBus.$on('eventBusName', function(val) {console.log(val)}) 

最后記住要在beforeDestroy()中關(guān)閉這個eventBus

eventBus.$off('eventBusName'); 

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。