本來想一篇文章寫完，但是又截圖又分析什么的，如果用一篇文章寫，太長了，估計都沒耐心看完，所以分成了幾篇來寫。

這篇主要說的是實現點擊右側字母索引，左邊能自動滾動到相應城市功能。

兄弟組件聯動

去字母索引組件的循環的li部分添加一個點擊事件，這個點擊事件接收一個e的事件對象，拿到事件對象，可以先打印e.target.innerText，這個時候去瀏覽器看看。

點擊的都會打印出來

此時點擊字母索引中的任意一個字母，控制臺會打印出相應字母的文字。

此時我們希望將字母傳給list組件，(list組件就是城市列表組件)然后讓list對應的區塊顯示出來。

list組件和字母索引組件是兄弟組件，這里就涉及到兄弟組件的傳值，它們是非父子組件，可通過bus總線的形式來傳值。

由于這里傳遞的數據比較簡單，就是ABCD...，并且組件的層級不深，所以我們可以將字母索引組件的值傳遞給City這個父組件，然后父組件再傳給list，這里的兄弟組件傳值就變成了子組件傳給父組件，父組件再傳給另一個子組件的形式了。

字母索引組件傳值給City父組件

給li定義一個點擊事件，當點擊字母的時候，向父組件派發一個change事件，這個事件帶的內容就是e.target.innerText，

派發事件

然后去City父組件接收這個事件，用名為handleLetterChange的函數來接收@change事件。

接收一下事件

接收函數打印一下帶來的參數內容letter

打印一下帶來的參數內容

當我們點擊字母的時候，字母在控制臺被打印出來，由City組件打印出來的，也就表明了 父組件成功接收了子組件傳過來的消息。

成功打印

City父組件再將內容轉發給list組件

父組件通過綁定屬性的形式傳給子組件數據，先在父組件的data部分定義一個letter的變量，為空，也就是letter: ''，

然后再去handleLetterChange函數中讓this.letter = letter，也就是讓傳過來的參數賦值給本地的letter，再給list組件綁定一個letter屬性，將本地的letter傳遞過去。

然后list子組件去接收這個letter。

接收后的邏輯

接收到letter要怎樣呢？

當list的組件發現letter有改變的時候，讓組件顯示的列表項和letter相同的首字母列表項顯示出來。

在這里要借助一個偵聽器watch，監聽letter，一旦它變化了，就要做點事了。

比如說當letter變的時候，將它打印出來：

watch監聽letter

一旦letter發生改變，就會執行這段代碼:

成功監聽到

在watch這個偵聽器具體做什么呢？

如果letter不為空的時候，調用betterScroll的一個方法，讓better-scroll自動滾動到某個元素上，外部傳一個A，就滾動到A區域上。

就是我這個方法

怎么做呢？

首先，去循環處拿到dom節點，還記得上篇說的兩層循環嗎？這里要拿的就是父級循環的ABCD的值，通過:ref="key"，記住這里是:ref而不是ref，意思是要綁定key的值。

拿到父級循環的abcd

然后去watch偵聽器獲取這層dom結構，定義element來接收它。

this.$refs[this.letter]的的意思是，原本我們要獲取某層dom是這樣寫的：

模板處：ref="xxx"

script部分: this.$refs.xxx

但是這里模板處是綁定的值

模板處: :ref="xxx"

script部分: this.$refs.xxx 這里原本應該是這樣寫的，

在js中xx.xxx 和xx[xxx]是一個意思，

所以也可以改寫為this.$refs[xxx]，xxx應該為傳入的letter值，因為這里的xxx是綁定的值

就像這樣

好啦，理想很豐滿，現實很骨感。本來理論上應該就是這么寫就可以了，但是當我們打印出來element的值，它居然不是一個dom對象！！而是一個數組：

變成了數組了

為啥？因為我們的ref是一個循環輸出的ref，使用循環輸出的ref的時候，它其實是一個數組。真正的dom元素在我標框框的地方。或取它也就是獲取下標0的內容就行了

效果粗剪版

拿到之后，將這個dom元素傳給scrollToElement里。

到這里，點擊A，A部分內容就出來了，粗剪版的效果就完成了。

下一篇說，滑動右側字母索引，左側對應滑動，做一個字母索引的滾動監聽。

總結

以上是生活随笔為你收集整理的vue搜索好友_Vue实现类似通讯录功能（中）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。