兄弟組件之間聯(lián)動--vue開發(fā)app點(diǎn)擊字母展示地區(qū)列表

下圖這種地區(qū)搜索方式在很多app中都很常見，今天就使用vue框架中的 better-scroll 第三方包來實(shí)現(xiàn)頁面滾動和點(diǎn)擊側(cè)邊欄字母該字母開頭的地區(qū)列表置頂功能。

來源：凱哥Java(kaigejava)

1、A子組件通過使用 this.$emit(事件名字，事件攜帶內(nèi)容) 向外觸發(fā)事件

首先，在<city-alphabet>組件每個字母元素上綁定事件，在該事件中向外觸發(fā)事件，并將值傳遞出去：

<template>

? ? <ul class="list">

? ? ? ? <li class="item"?

? ? ? ? v-for="(item,key) in city"?

? ? ? ? :key="key"

? ? ? ? @click="handleLetterClick"

? ? ? ? >

? ? ? ? {{ key }}

? ? ? ? </li>

? ? </ul>

</template>

methods:{

? ? handleLetterClick(e){

? ? ? ? this.$emit('change',e.target.innerText)

? ? }

}

2、父組件接收A組件傳過來的事件，并通過屬性來向B組件傳值

因?yàn)?lt;city-alphabet>組件傳遞過來的是單個字符串，所以，先在data中定義一個屬性letter來接收這個值；

聯(lián)系凱哥-》凱哥Java(kaigejava)

或凱哥個人博客：www.kaigejava.com

悄悄說下，凱哥個人博客可以私信凱哥哦~

并在父組件模板中的<city-alphabet>組件中定義傳遞的方法@change="handleLetterChange"用來獲取傳遞的值；

將letter屬性傳遞給另一個子組件<city-list>；

<template>

? ? <div>

? ? ? ? <city-list?

? ? ? ? :city="cities"?

? ? ? ? :hot="hotCities"

? ? ? ? :letter="letter"

? ? ? ? ></city-list>

? ? ? ? <city-alphabet?

? ? ? ? :city="cities"

? ? ? ? @change="handleLetterChange"

? ? ? ? ></city-alphabet>

? ? </div>

</template>

data(){

? ? return{

? ? ? ? letter:''

? ? }

},

methods:{

? ? handleLetterChange(letter){

? ? ? ? this.letter = letter

? ? }

},

3、B組件接收父組件傳遞過來的屬性，并通過watch監(jiān)聽參數(shù)的變化，然后執(zhí)行頁面的滾動顯示

首先，給每個地址列表區(qū)域元素加 ref ，better-scroll會根據(jù)ref給指定區(qū)域進(jìn)行操作；

然后使用watch監(jiān)聽letter變化，并使用better-scroll中的scrollToElement接口執(zhí)行頁面滾動；

<div class="area"?

v-for="(item,key) in city"?

:key="key"

:ref="key"

>

? ? ...

</div>

props:{

? ? letter:String

},

watch:{

? ? letter(){

? ? ? ? if(this.letter){

? ? ? ? ? ? // scrollToElement里只接受單個DOM元素，不接收數(shù)組

? ? ? ? ? ? //因?yàn)樯厦娴膁iv元素是數(shù)組渲染出來的，所以這里this.$refs得到的是數(shù)組

? ? ? ? ? ? const element = this.$refs[this.letter][0]

? ? ? ? ? ? this.scroll.scrollToElement(element)

? ? ? ? }

? ? }

}