需求
点击右边的字母，然后跳转到对应的字母的城市列表
如图，点击A 就显示到A。 点击B就显示到B
解决方法
第一步思路
首先要获取到点击的是什么东西，比如点击A就要获取到这个A。那么这个e代表的是什么呢？e其实就是点击事件，然后通过e的属性去获取到这个a。 这里可以通过控制台去查看
handleLetterClick(e){
console.log(e.target.innerText)
}
第二步思路
现在已经获取到了点击的东西，那么就要想把它传给谁。既然要让城市列表联动，那么就一定是传给这个列表组件。这里就会涉及到vue兄弟组件间的传值。
因为这两个是同父组件，所以不需要用到BUS总线的方式。直接将其传给父组件，然后在又父组件传递给子组件，这样就实现了兄弟组件间的传值
那么如何做呢？这里需要提到一个属性 emit。它用来向外传递事件。比如这个代码的意思是，每次点击时，向外触发change事件，并且传递这个值
this.$emit("change",e.target.innerText)
那么如何去监听呢？假如是A组件使用emit，那么就到其父组件中的template中对应的模板中去监听。即当监听到change事件时，又触发handleLetterChange事件
<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
然后将获取到的letter（即从子组件随着change事件传递过来的值）传给城市列表的子组件中。方法同使用mooc数据一样
handleLetterChange(letter){
this.letter=letter
}
第三步思路
问题又来了，当这个值传递给子组件后，该怎么使用？
思路是当监听到letter有变化后，就立即让开头字母为letter值的列表马上显示出来。所以接下来就是如何监听的事儿了。这里用到了watch侦听器。
还有一个问题，就是如何去改变列表的显示。由于这里使用的是better-scroll插件，所以会用到一个api
watch:{
letter(){
if(this.letter){
// 需要获取的dom应该是整个area，而不是愚蠢的去获取title
// 还有一点需要注意，如果是循环的，那么ref前面得加上冒号
// 即写成 :ref
const element=this.$refs[this.letter][0]
this.scroll.scrollToElement(element)
// console.log(this.$refs) //{A:Array(),B:Array(),.....}
}
}
}
到此为止~
