cba鑱旇禌璧涚▼ :Vue實現兄弟組件間的聯動效果

cba广东队赛程 www.axwwg.com  更新時間:2020-01-26 01:01:07   作者:佚名   我要評論(0)

需求說明


如圖,我想要實現當點擊字母L,頁面定位到L開頭的城市名

Do it


1.找到字母表的頁面
在html標簽綁定一個click事件,在js中定義一個方法,并使用參數

需求說明

如圖,我想要實現當點擊字母L,頁面定位到L開頭的城市名

Do it

1.找到字母表的頁面

在html標簽綁定一個click事件,在js中定義一個方法,并使用參數e獲取點擊的字母。當在頁面點擊時,console出來

效果如下 

2.通過city這個父頁面,進行列表頁和字母表頁面的值傳遞

<1>在字母表頁定義一個監聽方法

<2>進入city頁面,在html中綁定一個監聽事件

在js中編寫這個事件的方法

打開頁面,可以看到沒有問題,city頁面監聽到了字母表頁面的點擊

<3>city父頁面把字母表頁面的請求轉發給list頁面

首先我們要在city頁面定義一個letter變量,然后在方法中定義用這個變量接受letter

然后還是city頁面,我們要在html中綁定這個變量

3.子組件獲取父組件傳遞過來的值

父組件傳遞過來了一個letter之后,子組件就要接受這個letter。

首先在list頁面中先定義letter,然后利用監聽器,一旦letter變化,只要letter不是空,那么就讓滾動條滾動到這個元素的起始位置

最后記得在城市列表區域內注冊一個引用信息:ref=key,用來監聽你選中的key值

 保存后,實現了聯動效果。

總結

以上所述是小編給大家介紹的Vue實現兄弟組件間的聯動效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

您可能感興趣的文章:

  • vue移動端城市三級聯動組件使用詳解
  • 基于Vue組件化的日期聯動選擇器功能的實現代碼
  • 基于Vue2實現簡易的省市區縣三級聯動組件效果
  • vue.js模仿京東省市區三級聯動的選擇組件實例代碼
  • vue省市區三聯動下拉選擇組件的實現
  • Vue.js組件tree實現省市多級聯動

相關文章

  • Vue實現兄弟組件間的聯動效果

    Vue實現兄弟組件間的聯動效果

    需求說明 如圖,我想要實現當點擊字母L,頁面定位到L開頭的城市名 Do it 1.找到字母表的頁面 在html標簽綁定一個click事件,在js中定義一個方法,并使用參數
    2020-01-26

最新評論