關(guān)于Vue中$refs的探索淺析
最近公司在做一個新項目,出需求,原型圖,UI圖,接下來就輪到我了,畫頁面。在畫頁面的過程中,涉及到父子路由,于是,便自然想到了<router-view></router-view>,按照以往的操作,確定父子關(guān)系,配置好路由,就OK了。但是,對照需求文檔,仔細(xì)一看,后期聯(lián)調(diào)肯定要涉及父子頁面?zhèn)鬟f參數(shù)啊,比如下圖:
我要在父頁面拿到子頁面form表單的數(shù)據(jù), 如何做?
首先我想到的就是,通過this.router.push({name: '', params:{} }), 將參數(shù)帶到父頁面,但是這種方法行不通,因為子頁面沒有跳轉(zhuǎn)按鈕,沒有觸發(fā)事件。于是,我又想到了Vuex,將子頁面的form表單數(shù)據(jù)存儲到store中,但是這對于多個子頁面,就要建立多個store。不太合適。
那還有什么辦法呢?咦,我可不可以通過$refs拿到子頁面實(shí)例呢?試一把,哈哈,果然可以。這就太好了,拿到子頁面實(shí)例,也就可以拿到子頁面數(shù)據(jù),然后在父頁面如何操作,那就隨意了,,,哈哈哈。
具體操作如下圖:
總結(jié)
到此這篇關(guān)于Vue中$refs探索的文章就介紹到這了,更多相關(guān)Vue中$refs探索內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. Python網(wǎng)絡(luò)編程之ZeroMQ知識總結(jié)2. chat.asp聊天程序的編寫方法3. Python查找算法之分塊查找算法的實(shí)現(xiàn)4. .NET 中配置從xml轉(zhuǎn)向json方法示例詳解5. python實(shí)現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫水平條形圖案例6. python之cur.fetchall與cur.fetchone提取數(shù)據(jù)并統(tǒng)計處理操作7. Python TestSuite生成測試報告過程解析8. 解決AJAX返回狀態(tài)200沒有調(diào)用success的問題9. JSP之表單提交get和post的區(qū)別詳解及實(shí)例10. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案
