關于Vue中$refs的探索淺析

最近公司在做一個新項目，出需求，原型圖，UI圖，接下來就輪到我了，畫頁面。在畫頁面的過程中，涉及到父子路由，于是，便自然想到了<router-view></router-view>，按照以往的操作，確定父子關系，配置好路由，就OK了。但是，對照需求文檔，仔細一看，后期聯調肯定要涉及父子頁面傳遞參數啊，比如下圖：

我要在父頁面拿到子頁面form表單的數據, 如何做？

首先我想到的就是，通過this.router.push({name: '', params:{} }), 將參數帶到父頁面，但是這種方法行不通，因為子頁面沒有跳轉按鈕，沒有觸發事件。于是，我又想到了Vuex，將子頁面的form表單數據存儲到store中，但是這對于多個子頁面，就要建立多個store。不太合適。

那還有什么辦法呢？咦，我可不可以通過$refs拿到子頁面實例呢？試一把，哈哈，果然可以。這就太好了，拿到子頁面實例，也就可以拿到子頁面數據，然后在父頁面如何操作，那就隨意了，，，哈哈哈。

具體操作如下圖：

總結

到此這篇關于Vue中$refs探索的文章就介紹到這了,更多相關Vue中$refs探索內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！