右图此种沿海地区搜寻形式在许多app中都很常用，那时就采用vue架构中的 better-scroll 服务器端区努维同时实现网页慢速和点选侧边栏拉丁字母该拉丁字母结尾的沿海地区条目首页机能。
：凯哥Java(kaigejava)
1、A子模块透过采用 this.$emit(该事件英文名字，该事件随身携带文本) 向外促发该事件
具体来说，在模块每一拉丁字母原素上存取该事件，在该该事件中向外促发该事件，并将值传达进来：
v-for=”(item,key) in city”
:key=”key”
@click=”handleLetterClick”
>
{{ key }}
methods:{
handleLetterClick(e){
this.$emit(change,e.target.innerText)
}
}
2、父模块接收A模块传过来的该事件，并透过属性来向B模块传值
因为模块传达过来的是单个字符串，所以，先在data中定义一个属性letter来接收这个值；
将letter属性传达给另一个子模块；
:city=”cities”
:hot=”hotCities”
:letter=”letter”
>
:city=”cities”
@change=”handleLetterChange”
>
data(){
return{
letter:
}
},
methods:{
handleLetterChange(letter){
this.letter = letter
}
},
3、B模块接收父模块传达过来的属性，并透过watch监听参数的变化，然后执行页面的慢速显示
具体来说，给每一地址条目区域原素加 ref ，better-scroll会根据ref给指定区域进行操作；
然后采用watch监听letter变化，并采用better-scroll中的scrollToElement接口执行网页慢速；
v-for=”(item,key) in city”
:key=”key”
:ref=”key”
>
…
props:{
letter:String
},
watch:{
letter(){
if(this.letter){
// scrollToElement里只接受单个DOM原素，不接收数组
//因为上面的div原素是数组渲染出来的，所以这里this.$refs得到的是数组
const element = this.$refs[this.letter][0]
this.scroll.scrollToElement(element)
}
}
}
