最近公司在做一個(gè)新項(xiàng)目，出需求，原型圖，UI圖，接下來(lái)就輪到我了，畫(huà)頁(yè)面。在畫(huà)頁(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è)面沒(méi)有跳轉(zhuǎn)按鈕，沒(méi)有觸發(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)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！