[TOC]
## 前提
> City.vue 是父組件
> word.vue 是事件傳值的子組件
> list.vue 是接值子組件
### 1、通過點擊事件將字母轉遞給父組件City.vue
```
<li @click="handleClick" v-for="(item,index) of cities" :key="index" >{{index}}</li>
methods: {
handleClick(event){
this.$emit("changeWord",event.target.innerText)
}
}
```
### 2.在City.vue里接收傳遞的參數
```
<city-word :cities="cities" @changeWord="handleWord"></city-word>
data() {
return {
letter:""
}
},
methods:{
handleWord(word){
this.letter = word
}
}
```
### 3.letter傳遞給List.vue組件
//通過city.vue的屬性傳遞
```
<city-list :cities="cities" :hotCities="hotCities" :letter="letter"></city-list>
```
### 4.在list.vue組件里接收傳過來的值letter
```
props: ["cities", "hotCities","letter"],
```
### 5.在list.vue通過watch屬性，偵聽letter值的變化
```
watch:{
letter(){
console.log(this.letter)
}
}
```
### 6、結合Better-Scroll 組件讓元素滾動到相應的位置
(list.vue)
```
mounted() {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.wrapper, {});
});
},
watch:{
letter(){
let element = this.$refs[this.letter][0]
this.scroll.scrollToElement(element)
}
}
```
