關(guān)于Vue中$refs的探索淺析
最近公司在做一個(gè)新項(xiàng)目，出需求，原型圖，UI圖，接下來(lái)就輪到我了，畫頁(yè)面。在畫頁(yè)面的過(guò)程中，涉及到父子路由，于是，便自然想到了<router-view></router-view>，按照以往的操作，確定父子關(guān)系，配置好路由，就OK了。但是，對(duì)照需求文檔，仔細(xì)一看，后期聯(lián)調(diào)肯定要涉及父子頁(yè)面?zhèn)鬟f參數(shù)啊，比如下圖：
我要在父頁(yè)面拿到子頁(yè)面form表單的數(shù)據(jù), 如何做？
首先我想到的就是，通過(guò)this.router.push({name: "", params:{} }), 將參數(shù)帶到父頁(yè)面，但是這種方法行不通，因?yàn)樽禹?yè)面沒有跳轉(zhuǎn)按鈕，沒有觸發(fā)事件。于是，我又想到了Vuex，將子頁(yè)面的form表單數(shù)據(jù)存儲(chǔ)到store中，但是這對(duì)于多個(gè)子頁(yè)面，就要建立多個(gè)store。不太合適。
那還有什么辦法呢？咦，我可不可以通過(guò)$refs拿到子頁(yè)面實(shí)例呢？試一把，哈哈，果然可以。這就太好了，拿到子頁(yè)面實(shí)例，也就可以拿到子頁(yè)面數(shù)據(jù)，然后在父頁(yè)面如何操作，那就隨意了，，，哈哈哈。
具體操作如下圖：
總結(jié)
到此這篇關(guān)于Vue中$refs探索的文章就介紹到這了,更多相關(guān)Vue中$refs探索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目中如何使用TypeScript相關(guān)配置
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中如何使用TypeScript相關(guān)配置的相關(guān)資料,typescript在開發(fā)過(guò)程中廣泛被應(yīng)用,在這里總結(jié)下項(xiàng)目中ts的應(yīng)用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了Vue 的router路由，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
解決Vue.js由于延時(shí)顯示了{(lán){message}}引用界面的問(wèn)題
今天小編就為大家分享一篇解決Vue.js由于延時(shí)顯示了{(lán){message}}引用界面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Vue2項(xiàng)目配置@指向src路徑方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue el-upload上傳文件的示例代碼，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Vue.js是目前很火的一個(gè)前端框架，采用MVVM模式設(shè)計(jì)，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。本文重點(diǎn)給大家介紹Vuejs開發(fā)環(huán)境搭建及熱更新的相關(guān)知識(shí)，需要的朋友參考下吧2018-09-09
詳解VUE 定義全局變量的幾種實(shí)現(xiàn)方式
本篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
這篇文章主要介紹了vue監(jiān)聽滾動(dòng)事件的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問(wèn)題及解決
這篇文章主要介紹了vue使用多級(jí)彈窗(Dialog)出現(xiàn)蒙版遮罩問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑的解決方法
本文給大家介紹vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑，如E:\medicineOfCH\stageImage\xxx.jpg，本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧2023-04-04