Vue實現(xiàn)兄弟組件間的聯(lián)動效果
需求說明
如圖,我想要實現(xiàn)當(dāng)點擊字母L,頁面定位到L開頭的城市名
Do it
1.找到字母表的頁面
在html標(biāo)簽綁定一個click事件,在js中定義一個方法,并使用參數(shù)e獲取點擊的字母。當(dāng)在頁面點擊時,console出來
效果如下
2.通過city這個父頁面,進(jìn)行列表頁和字母表頁面的值傳遞
<1>在字母表頁定義一個監(jiān)聽方法
<2>進(jìn)入city頁面,在html中綁定一個監(jiān)聽事件
在js中編寫這個事件的方法
打開頁面,可以看到?jīng)]有問題,city頁面監(jiān)聽到了字母表頁面的點擊
<3>city父頁面把字母表頁面的請求轉(zhuǎn)發(fā)給list頁面
首先我們要在city頁面定義一個letter變量,然后在方法中定義用這個變量接受letter
然后還是city頁面,我們要在html中綁定這個變量
3.子組件獲取父組件傳遞過來的值
父組件傳遞過來了一個letter之后,子組件就要接受這個letter。
首先在list頁面中先定義letter,然后利用監(jiān)聽器,一旦letter變化,只要letter不是空,那么就讓滾動條滾動到這個元素的起始位置
最后記得在城市列表區(qū)域內(nèi)注冊一個引用信息:ref=key,用來監(jiān)聽你選中的key值
保存后,實現(xiàn)了聯(lián)動效果。
總結(jié)
以上所述是小編給大家介紹的Vue實現(xiàn)兄弟組件間的聯(lián)動效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
vue封裝全局彈窗警告組件this.$message.success問題
這篇文章主要介紹了vue封裝全局彈窗警告組件this.$message.success問題,具有很的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09VUE配置proxy代理的開發(fā)測試及生產(chǎn)環(huán)境
這篇文章主要為大家介紹了VUE配置proxy代理的開發(fā)環(huán)境、測試環(huán)境、生產(chǎn)環(huán)境詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08