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

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

首先，在組件每個字母元素上綁定事件，在該事件中向外觸發事件，并將值傳遞出去：

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

  :key="key"

  @click="handleLetterClick"

  >

  {{ key }}

methods:{

handleLetterClick(e){

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

}

}

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

因為組件傳遞過來的是單個字符串，所以，先在data中定義一個屬性letter來接收這個值；

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

將letter屬性傳遞給另一個子組件；

:city="cities"

:hot="hotCities"

:letter="letter"

>

:city="cities"

@change="handleLetterChange"

>

data(){

return{

letter:''

}

},

methods:{

handleLetterChange(letter){

this.letter = letter

}

},

3、B組件接收父組件傳遞過來的屬性，并通過watch監聽參數的變化，然后執行頁面的滾動顯示

首先，給每個地址列表區域元素加 ref ，better-scroll會根據ref給指定區域進行操作；

然后使用watch監聽letter變化，并使用better-scroll中的scrollToElement接口執行頁面滾動；

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

:key="key"

:ref="key"

>

...

props:{

letter:String

},

watch:{

letter(){

if(this.letter){

// scrollToElement里只接受單個DOM元素，不接收數組

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

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

this.scroll.scrollToElement(element)

}

}

}

總結

以上是生活随笔為你收集整理的jq监听子元素被点击_vue开发app点击字母展示地区列表（兄弟组件之间联动）的全部內容，希望文章能夠幫你解決所遇到的問題。

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