溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了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組件中頁面傳值的方式有哪些，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
