本篇文章為大家展示了vue組件中頁面傳值的方式有哪些，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

創新互聯公司專注于滄縣企業網站建設,響應式網站開發,商城網站定制開發。滄縣網站建設公司,為滄縣等地區提供建站服務。全流程按需網站開發，專業設計，全程項目跟蹤，創新互聯公司專業和態度為您提供的服務

一、路由傳值

路由對象如下圖所示：

在跳轉頁面的時候，在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');

上述內容就是vue組件中頁面傳值的方式有哪些，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。

分享名稱：vue組件中頁面傳值的方式有哪些
路徑分享：http://vcdvsql.cn/article48/jhjphp.html

成都網站建設公司_創新互聯，為您提供網站設計公司、網站設計、小程序開發、品牌網站設計、網站收錄、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯