需求

点击右边的字母，然后跳转到对应的字母的城市列表

如图，点击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(),.....}
            }
        }
    }

到此为止~