詳解vuejs幾種不同組件（頁面）間傳值的方式
在應(yīng)用復(fù)雜時(shí)，推薦使用vue官網(wǎng)推薦的vuex，以下討論簡單SPA中的組件間傳值。
一、路由傳值
路由對(duì)象如下圖所示：
在跳轉(zhuǎn)頁面的時(shí)候，在js代碼中的操作如下，在標(biāo)簽中使用<router-link>標(biāo)簽
this.$router.push({
name: 'routePage',
query/params: {
routeParams: params
}
})
需要注意的是，實(shí)用params去傳值的時(shí)候，在頁面刷新時(shí)，參數(shù)會(huì)消失，用query則不會(huì)有這個(gè)問題。
這樣使用起來很方便，但url會(huì)變得很長，而且如果不是使用路由跳轉(zhuǎn)的界面無法使用。
二、通過$parent,$chlidren等方法調(diào)取用層級(jí)關(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ù)
使用前可以在全局定義一個(gè)eventBus
window.eventBus = new Vue();
在需要傳遞參數(shù)的組件中，定義一個(gè)emit發(fā)送需要傳遞的值，鍵名可以自己定義（可以為對(duì)象）
eventBus.$emit('eventBusName', id);
在需要接受參數(shù)的組件重，用on接受該值（或?qū)ο螅?/p>
//val即為傳遞過來的值
eventBus.$on('eventBusName', function(val) {console.log(val)})
最后記住要在beforeDestroy()中關(guān)閉這個(gè)eventBus
eventBus.$off('eventBusName');
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue組件實(shí)現(xiàn)移動(dòng)端九宮格轉(zhuǎn)盤抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了vue組件實(shí)現(xiàn)移動(dòng)端九宮格轉(zhuǎn)盤抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
關(guān)于vue.js v-bind 的一些理解和思考
本篇文章主要介紹了關(guān)于vue.js v-bind 的一些理解和思考，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
本篇文章主要介紹了vue過濾器在v2.0版本用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了vue路由插件之vue-route的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹了vue router的使用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Delete `,` 如何解決(vue eslint與prettier沖突)
這篇文章主要介紹了Delete `,` 如何解決(vue eslint與prettier沖突)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue 級(jí)聯(lián)下拉框的設(shè)計(jì)與實(shí)現(xiàn)
在前端開發(fā)中，級(jí)聯(lián)選擇框是經(jīng)常用到的，這樣不僅可以增加用戶輸入的友好性，還能減少前后端交互的數(shù)據(jù)量。本文就介紹一下使用Vue實(shí)現(xiàn)級(jí)聯(lián)下拉框，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了vue滑動(dòng)吸頂及錨點(diǎn)定位的示例代碼,代碼簡單易懂，非常不錯(cuò)對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)二級(jí)彈框案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
在 Vue.js 中，父子組件通信是非常重要的，在本文中，我們討論了 Vue.js 中父子組件通信的幾種方式，包括使用 props 傳遞數(shù)據(jù)、使用 Sync 修飾符實(shí)現(xiàn)雙向綁定、使用自定義事件傳遞數(shù)據(jù)、使用 $refs 訪問子組件實(shí)例以及使用 $children 和 $parent 訪問父子組件實(shí)例2023-09-09
vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決
這篇文章主要介紹了vue-cli4創(chuàng)建項(xiàng)目導(dǎo)入Element-UI踩過的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04