關(guān)于Vue中$refs的探索淺析
最近公司在做一個(gè)新項(xiàng)目，出需求，原型圖，UI圖，接下來就輪到我了，畫頁面。在畫頁面的過程中，涉及到父子路由，于是，便自然想到了<router-view></router-view>，按照以往的操作，確定父子關(guān)系，配置好路由，就OK了。但是，對(duì)照需求文檔，仔細(xì)一看，后期聯(lián)調(diào)肯定要涉及父子頁面?zhèn)鬟f參數(shù)啊，比如下圖：
我要在父頁面拿到子頁面form表單的數(shù)據(jù), 如何做？
首先我想到的就是，通過this.router.push({name: "", params:{} }), 將參數(shù)帶到父頁面，但是這種方法行不通，因?yàn)樽禹撁鏇]有跳轉(zhuǎn)按鈕，沒有觸發(fā)事件。于是，我又想到了Vuex，將子頁面的form表單數(shù)據(jù)存儲(chǔ)到store中，但是這對(duì)于多個(gè)子頁面，就要建立多個(gè)store。不太合適。
那還有什么辦法呢？咦，我可不可以通過$refs拿到子頁面實(shí)例呢？試一把，哈哈，果然可以。這就太好了，拿到子頁面實(shí)例，也就可以拿到子頁面數(shù)據(jù)，然后在父頁面如何操作，那就隨意了，，，哈哈哈。
具體操作如下圖：
總結(jié)
到此這篇關(guān)于Vue中$refs探索的文章就介紹到這了,更多相關(guān)Vue中$refs探索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于mpvue的簡(jiǎn)單彈窗組件mptoast使用詳解
這篇文章主要介紹了基于mpvue的簡(jiǎn)單彈窗組件mptoast使用詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
本文主要介紹了Element el-upload上傳組件使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue3 element-plus如何使用icon圖標(biāo)組件
這篇文章主要介紹了vue3 element-plus如何使用icon圖標(biāo)組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vuex unknown action type報(bào)錯(cuò)問題及解決
這篇文章主要介紹了Vuex unknown action type報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了Vue中生命周期定義及流程，生命周期又被稱為生命周期回調(diào)函數(shù)、生命周期函數(shù)或生命周期鉤子，下文關(guān)于其更多有趣的介紹需要的小伙伴可以參考一下文章詳細(xì)內(nèi)容2022-05-05
Vue Router 路由實(shí)際上就是一種映射關(guān)系,例如,多個(gè)選項(xiàng)卡之間的切換就可以使用路由功能來實(shí)現(xiàn),在實(shí)際的開發(fā)中,經(jīng)常需要通過URL來傳遞參數(shù),同時(shí)在 JavaScript 腳本中需要獲取URL中的參數(shù),下面將介紹 Vue 項(xiàng)目中,如何通過 URL 對(duì)參數(shù)進(jìn)行傳遞與獲取,需要的朋友可以參考下2024-09-09
vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼
本篇文章主要介紹了vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
vue實(shí)現(xiàn)自定義表格工具擴(kuò)展
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義表格工具擴(kuò)展，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue-cropper實(shí)現(xiàn)裁剪圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
vue實(shí)現(xiàn)el-select的change事件過程
這篇文章主要介紹了vue實(shí)現(xiàn)el-select的change事件過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04