Vue實(shí)現(xiàn)兄弟組件間的聯(lián)動(dòng)效果
需求說(shuō)明
如圖，我想要實(shí)現(xiàn)當(dāng)點(diǎn)擊字母L，頁(yè)面定位到L開(kāi)頭的城市名
Do it
1.找到字母表的頁(yè)面
在html標(biāo)簽綁定一個(gè)click事件，在js中定義一個(gè)方法，并使用參數(shù)e獲取點(diǎn)擊的字母。當(dāng)在頁(yè)面點(diǎn)擊時(shí)，console出來(lái)
效果如下
2.通過(guò)city這個(gè)父頁(yè)面，進(jìn)行列表頁(yè)和字母表頁(yè)面的值傳遞
<1>在字母表頁(yè)定義一個(gè)監(jiān)聽(tīng)方法
<2>進(jìn)入city頁(yè)面，在html中綁定一個(gè)監(jiān)聽(tīng)事件
在js中編寫(xiě)這個(gè)事件的方法
打開(kāi)頁(yè)面，可以看到?jīng)]有問(wèn)題，city頁(yè)面監(jiān)聽(tīng)到了字母表頁(yè)面的點(diǎn)擊
<3>city父頁(yè)面把字母表頁(yè)面的請(qǐng)求轉(zhuǎn)發(fā)給list頁(yè)面
首先我們要在city頁(yè)面定義一個(gè)letter變量，然后在方法中定義用這個(gè)變量接受letter
然后還是city頁(yè)面，我們要在html中綁定這個(gè)變量
3.子組件獲取父組件傳遞過(guò)來(lái)的值
父組件傳遞過(guò)來(lái)了一個(gè)letter之后，子組件就要接受這個(gè)letter。
首先在list頁(yè)面中先定義letter，然后利用監(jiān)聽(tīng)器，一旦letter變化，只要letter不是空，那么就讓滾動(dòng)條滾動(dòng)到這個(gè)元素的起始位置
最后記得在城市列表區(qū)域內(nèi)注冊(cè)一個(gè)引用信息:ref=key，用來(lái)監(jiān)聽(tīng)你選中的key值
保存后，實(shí)現(xiàn)了聯(lián)動(dòng)效果。
總結(jié)
以上所述是小編給大家介紹的Vue實(shí)現(xiàn)兄弟組件間的聯(lián)動(dòng)效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue使用Element-UI實(shí)現(xiàn)分頁(yè)效果全過(guò)程
element-ui官網(wǎng)上有分頁(yè)實(shí)現(xiàn)的功能,簡(jiǎn)單方便又好用,也有很多分頁(yè)的樣式,你可以根據(jù)需要去選擇自己想要的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue使用Element-UI實(shí)現(xiàn)分頁(yè)效果的相關(guān)資料,需要的朋友可以參考下2023-04-04
v-for循環(huán)遍歷數(shù)據(jù),永遠(yuǎn)不要把v-if和v-for同時(shí)用在同一個(gè)元素上,下面這篇文章主要給大家介紹了關(guān)于如何通過(guò)一文帶你詳細(xì)了解Vue中v-for的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue計(jì)算屬性computed的使用方法,結(jié)合實(shí)例形式分析了vue計(jì)算屬性computed的基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
vue在install時(shí)node-sass@4.14.1?postinstall:node?scripts/buil
最近在npm install 的時(shí)候遇到了個(gè)問(wèn)題,所以給大家總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于vue在install時(shí)node-sass@4.14.1?postinstall:node?scripts/build.js錯(cuò)誤的解決方法,需要的朋友可以參考下2023-05-05
Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn)
Vue3中的app.config.globalProperties是一個(gè)強(qiáng)大的全局配置功能,允許我們?cè)趹?yīng)用級(jí)別設(shè)置和訪問(wèn)屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了vue子組件中mounted取不到props中的值情況，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli3.0項(xiàng)目打包后如何修改訪問(wèn)后端地址
這篇文章主要介紹了vue-cli3.0項(xiàng)目打包后如何修改訪問(wèn)后端地址，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Element-ui設(shè)置el-table表頭全選框隱藏或禁用
這篇文章主要給大家介紹了關(guān)于Element-ui設(shè)置el-table表頭全選框隱藏或禁用的相關(guān)資料,文中手把手教你實(shí)現(xiàn)el-table實(shí)現(xiàn)跨表格禁用選項(xiàng),需要的朋友可以參考下2023-07-07
vue3+ts中定義ref變量,設(shè)置變量類(lèi)型方式
這篇文章主要介紹了vue3+ts中定義ref變量,設(shè)置變量類(lèi)型方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Ant?Design?of?Vue?select框獲取key和name的問(wèn)題
這篇文章主要介紹了Ant?Design?of?Vue?select框獲取key和name的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06