vuejs幾種不同組件（頁面）間傳值的方式

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

一、路由傳值

　　路由對象如下圖所示：

　　

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

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

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

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

 

二、通過$parent,$chlidren等方法調取用層級關系的組件內的數據和方法

　　通過下面的方法調用：

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

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

 

三、通過eventBus傳遞數據

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

window.eventBus = new Vue();

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

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

　　在需要接受參數的組件重，用on接受該值（或對象）

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

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

eventBus.$off('eventBusName');