[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)
}
}
```
