vue开发app点击字母展示地区列表（兄弟组件之间联动）

下图这种地区搜索方式在很多app中都很常见，今天就使用vue框架中的 better-scroll 第三方包来实现页面滚动和点击侧边栏字母该字母开头的地区列表置顶功能。

1、A子组件通过使用 this.$emit(事件名字，事件携带内容) 向外触发事件

首先，在<city-alphabet>组件每个字母元素上绑定事件，在该事件中向外触发事件，并将值传递出去：

<template>

<ul class="list">

<li class="item"

v-for="(item,key) in city"

:key="key"

@click="handleLetterClick"

>

{{ key }}

</li>

</ul>

</template>

methods:{

handleLetterClick(e){

this.$emit('change',e.target.inne