Vue實(shí)現(xiàn)兄弟組件間的聯(lián)動效果
需求說明
如圖，我想要實(shí)現(xiàn)當(dāng)點(diǎn)擊字母L，頁面定位到L開頭的城市名
Do it
1.找到字母表的頁面
在html標(biāo)簽綁定一個click事件，在js中定義一個方法，并使用參數(shù)e獲取點(diǎn)擊的字母。當(dāng)在頁面點(diǎn)擊時，console出來
效果如下
2.通過city這個父頁面，進(jìn)行列表頁和字母表頁面的值傳遞
<1>在字母表頁定義一個監(jiān)聽方法
<2>進(jìn)入city頁面，在html中綁定一個監(jiān)聽事件
在js中編寫這個事件的方法
打開頁面，可以看到?jīng)]有問題，city頁面監(jiān)聽到了字母表頁面的點(diǎ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值
保存后，實(shí)現(xiàn)了聯(lián)動效果。
總結(jié)
以上所述是小編給大家介紹的Vue實(shí)現(xiàn)兄弟組件間的聯(lián)動效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
Vue使用Element-UI實(shí)現(xiàn)分頁效果全過程
element-ui官網(wǎng)上有分頁實(shí)現(xiàn)的功能,簡單方便又好用,也有很多分頁的樣式,你可以根據(jù)需要去選擇自己想要的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue使用Element-UI實(shí)現(xiàn)分頁效果的相關(guān)資料,需要的朋友可以參考下2023-04-04
v-for循環(huán)遍歷數(shù)據(jù),永遠(yuǎn)不要把v-if和v-for同時用在同一個元素上,下面這篇文章主要給大家介紹了關(guān)于如何通過一文帶你詳細(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時node-sass@4.14.1?postinstall:node?scripts/buil
最近在npm install 的時候遇到了個問題,所以給大家總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于vue在install時node-sass@4.14.1?postinstall:node?scripts/build.js錯誤的解決方法,需要的朋友可以參考下2023-05-05
Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn)
Vue3中的app.config.globalProperties是一個強(qiáng)大的全局配置功能,允許我們在應(yīng)用級別設(shè)置和訪問屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了vue子組件中mounted取不到props中的值情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli3.0項(xiàng)目打包后如何修改訪問后端地址
這篇文章主要介紹了vue-cli3.0項(xiàng)目打包后如何修改訪問后端地址，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教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è)置變量類型方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Ant?Design?of?Vue?select框獲取key和name的問題
這篇文章主要介紹了Ant?Design?of?Vue?select框獲取key和name的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06