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

成都創(chuàng)新互聯(lián)公司2013年至今，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元臨城做網(wǎng)站,已為上家服務(wù),為臨城各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

下圖這種地區(qū)搜索方式在很多app中都很常見，今天就使用vue框架中的 better-scroll 第三方包來實現(xià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組件傳值

因為<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ū)域進行操作；

然后使用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ù)組

? //因為上面的div元素是數(shù)組渲染出來的，所以這里this.$refs得到的是數(shù)組

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

? this.scroll.scrollToElement(element)

? }

? }

}

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：兄弟組件之間聯(lián)動--vue開發(fā)app點擊字母展示地區(qū)列表-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://muchs.cn/article6/hesog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、面包屑導(dǎo)航、網(wǎng)頁設(shè)計公司、云服務(wù)器、ChatGPT、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)