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