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

這篇主要說的是實(shí)現(xiàn)點(diǎn)擊右側(cè)字母索引，左邊能自動(dòng)滾動(dòng)到相應(yīng)城市功能。

兄弟組件聯(lián)動(dòng)

去字母索引組件的循環(huán)的li部分添加一個(gè)點(diǎn)擊事件，這個(gè)點(diǎn)擊事件接收一個(gè)e的事件對(duì)象，拿到事件對(duì)象，可以先打印e.target.innerText，這個(gè)時(shí)候去瀏覽器看看。

點(diǎn)擊的都會(huì)打印出來

此時(shí)點(diǎn)擊字母索引中的任意一個(gè)字母，控制臺(tái)會(huì)打印出相應(yīng)字母的文字。

此時(shí)我們希望將字母?jìng)鹘olist組件，(list組件就是城市列表組件)然后讓list對(duì)應(yīng)的區(qū)塊顯示出來。

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

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

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

給li定義一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊字母的時(shí)候，向父組件派發(fā)一個(gè)change事件，這個(gè)事件帶的內(nèi)容就是e.target.innerText，

派發(fā)事件

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

接收一下事件

接收函數(shù)打印一下帶來的參數(shù)內(nèi)容letter

打印一下帶來的參數(shù)內(nèi)容

當(dāng)我們點(diǎn)擊字母的時(shí)候，字母在控制臺(tái)被打印出來，由City組件打印出來的，也就表明了 父組件成功接收了子組件傳過來的消息。

成功打印

City父組件再將內(nèi)容轉(zhuǎn)發(fā)給list組件

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

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

然后list子組件去接收這個(gè)letter。

接收后的邏輯

接收到letter要怎樣呢？

當(dāng)list的組件發(fā)現(xiàn)letter有改變的時(shí)候，讓組件顯示的列表項(xiàng)和letter相同的首字母列表項(xiàng)顯示出來。

在這里要借助一個(gè)偵聽器watch，監(jiān)聽letter，一旦它變化了，就要做點(diǎn)事了。

比如說當(dāng)letter變的時(shí)候，將它打印出來：

watch監(jiān)聽letter

一旦letter發(fā)生改變，就會(huì)執(zhí)行這段代碼:

成功監(jiān)聽到

在watch這個(gè)偵聽器具體做什么呢？

如果letter不為空的時(shí)候，調(diào)用betterScroll的一個(gè)方法，讓better-scroll自動(dòng)滾動(dòng)到某個(gè)元素上，外部傳一個(gè)A，就滾動(dòng)到A區(qū)域上。

就是我這個(gè)方法

怎么做呢？

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

拿到父級(jí)循環(huán)的abcd

然后去watch偵聽器獲取這層dom結(jié)構(gòu)，定義element來接收它。

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

模板處：ref="xxx"

script部分: this.$refs.xxx

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

模板處: :ref="xxx"

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

在js中xx.xxx 和xx[xxx]是一個(gè)意思，

所以也可以改寫為this.$refs[xxx]，xxx應(yīng)該為傳入的letter值，因?yàn)檫@里的xxx是綁定的值

就像這樣

好啦，理想很豐滿，現(xiàn)實(shí)很骨感。本來理論上應(yīng)該就是這么寫就可以了，但是當(dāng)我們打印出來element的值，它居然不是一個(gè)dom對(duì)象！！而是一個(gè)數(shù)組：

變成了數(shù)組了

為啥？因?yàn)槲覀兊膔ef是一個(gè)循環(huán)輸出的ref，使用循環(huán)輸出的ref的時(shí)候，它其實(shí)是一個(gè)數(shù)組。真正的dom元素在我標(biāo)框框的地方。或取它也就是獲取下標(biāo)0的內(nèi)容就行了

效果粗剪版

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

到這里，點(diǎn)擊A，A部分內(nèi)容就出來了，粗剪版的效果就完成了。

下一篇說，滑動(dòng)右側(cè)字母索引，左側(cè)對(duì)應(yīng)滑動(dòng)，做一個(gè)字母索引的滾動(dòng)監(jiān)聽。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。