詳解vuejs幾種不同組件（頁面）間傳值的方式
在應(yīng)用復(fù)雜時，推薦使用vue官網(wǎng)推薦的vuex，以下討論簡單SPA中的組件間傳值。
一、路由傳值
路由對象如下圖所示：
在跳轉(zhuǎn)頁面的時候，在js代碼中的操作如下，在標(biāo)簽中使用<router-link>標(biāo)簽
this.$router.push({
name: 'routePage',
query/params: {
routeParams: params
}
})
需要注意的是，實(shí)用params去傳值的時候，在頁面刷新時，參數(shù)會消失，用query則不會有這個問題。
這樣使用起來很方便，但url會變得很長，而且如果不是使用路由跳轉(zhuǎn)的界面無法使用。
二、通過$parent,$chlidren等方法調(diào)取用層級關(guān)系的組件內(nèi)的數(shù)據(jù)和方法
通過下面的方法調(diào)用：
this.$parent.$data.id //獲取父元素data中的id this.$children.$data.id //獲取父元素data中的id
這樣用起來比較靈活，但是容易造成代碼耦合性太強(qiáng)，導(dǎo)致維護(hù)困難
三、通過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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3使用hooks函數(shù)實(shí)現(xiàn)代碼復(fù)用詳解
這篇文章主要介紹了Vue3使用hooks函數(shù)實(shí)現(xiàn)代碼復(fù)用詳解，Vue3的hook函數(shù)可以幫助我們提高代碼的復(fù)用性,?讓我們能在不同的組件中都利用hooks函數(shù)2022-06-06
詳解mpvue中使用vant時需要注意的onChange事件的坑
這篇文章主要介紹了詳解mpvue中使用vant時需要注意的onChange事件的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了vue中的主動觸發(fā)點(diǎn)擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了淺談vue中文件下載的幾種方式及方法封裝，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue slot與傳參實(shí)例代碼講解，在文章末尾給大家介紹了vue 利用slot向父組件傳值的方法,需要的朋友可以參考下2019-04-04
本文主要介紹了VUE中Non-Props屬性的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue后端傳文件流轉(zhuǎn)化成blob對象,前端點(diǎn)擊下載返回undefined問題
這篇文章主要介紹了vue后端傳文件流轉(zhuǎn)化成blob對象,前端點(diǎn)擊下載返回undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
凡是做SPA的項(xiàng)目,特別是移動端的SAP項(xiàng)目,首屏加載速度必定是一個繞不過去的話題,下面這篇文章主要給大家介紹了關(guān)于Vue頁面首次載入優(yōu)化的相關(guān)資料,需要的朋友可以參考下2021-12-12
例如組件使用頻率非常高,幾乎每個頁面都在使用便可以封裝成全局組件,下面通過本文給大家介紹Vue3注冊全局組件的相關(guān)知識,感興趣的朋友一起看看吧2024-01-01
Vue3+vite路由配置優(yōu)化(自動化導(dǎo)入)
這篇文章主要介紹了Vue3+vite路由配置優(yōu)化(自動化導(dǎo)入),需要的朋友可以參考下2023-09-09