1.数据传递步骤：
第一步：Alphabet.vue 按下对外触发一个change事件，并传递点击的对应字母的值作为参数letter传递出去.
第二步：City.vue作为父组件，接收子组件Alphabet.vue传递过来的事件，并且创建一个新的属性letter，该属性作为参数传递给另一个子组件list.vue,
第三步：list.vue 接收父组件传递过来的的参数，开启监听watch，当letter值发生改变时就，利用该letter参数找到对应的元素，利用betterscroll定位到指定的元素上，即完成整个参数的传递过程(主要过程)。
2，技术难点
vue中怎么向外触发事件，并且传递参数？
点击事件中怎么获取元素的内容？
this.$emit('change',e.terget.innerText)
怎么利用参数获得对应的元素？
const element = this.refs[this.letter][0]
如何开启监听？ (和mounted同级)
watch : {
letter ( ) {
if （this.letter） {
const element = this.refs[this.letter][0]
this.scroll.scrollToElement(element)
}
}
}
3.完整代码
向父组件触发事件，并且传递参数
handleLetterClick (e) {
// console.log(e.target.innerText)
// 获得当前的字母是什么 核心就是要把这个字母传递给list.vue
// 表示向外触发事件，事件名称为change， 事件内容为 this.letters[index]
this.$emit('change', e.target.innerText)
},
父组件接收事件并且
handleLetterChange (letter) {
// 实现了 City.vue 接收Alphabet.vue发送的数据，然后就是通过属性的形式 要把这个数据发送给List.vue
this.letter = letter
// console.log(letter)
}
list的组件接收和监听
watch: {
// wath 是一个监听器， 一旦letter发生了改变，那么就会执行这个事件
letter ( ) {
// console.log(this.letter)
if (this.letter) {
// const element = this.$refs['C'][0] 实验用
// 获取对应的元素
const element = this.$refs[this.letter][0]
console.log(element)
/// 下面这句代码就是 让betterscroll 滚动到指定区域，直接定位到指定的区域
// 里面的参数必须要是 dom元素或则dom选择器
this.scroll.scrollToElement(element)
}
