兄弟组件数据传递

    在用Vue仿去哪儿网app的项目中，在城市选择页面有一个功能，点击右侧字母，相应拼音首字母为所点击字母的城市子列表滚动到显示区域。这该如何实现呢？

（1）问题情景：页面如图1，其中的城市显示列表（“当前城市”，“热门城市”，“字母开头城市子列表”）均由一个名为 List.vue 的子组件构造，而右侧纵列字母则有 Alphabet.vue 子组件构造，这两个子组件的父组件为 City.vue.

图一  城市选择页面

（2）解决方案：这里涉及兄弟组件间的传值，Alphabet子组件先向父组件City.vue传值， City.Vue 再向List.vue子组件传值。（这里传递的值就是页面右侧被点击的字母，数据格式为String），相关代码如下：

图2-1  Alphabet子组件中绑定字母（页面上是li 元素）点击事件
图2-2  Alphabet子组件向外发送名为change的事件   图2-3    City.vue父组件中对Alphabet子组件中的change事件进行监听
图2-4    City.vue父组件中对监听到的change事件进行处理

 Note:  letter定义在City.vue中的data中，初始化为 letter : ""。

图2-5    List.vue子组件中的字母开头城市子列表的页面构造

Note: 在字母开头城市子列表 div 标签上设置了 :ref="key"  (此处key为图一中相同拼音首字母城市的相应大写字母，如A),可以借此获取特定dom元素。

图2-6    List.vue子组件使用watch监听letter

Note:   this.scroll.scrollToElement(element)会将element对应的dom区域滚动至页面显示区域，如图3所示。

图3  实现效果

总结：Vue中的兄弟组件（A和B）数据传递并不是直接进行的，而是以共同的父组件（C）为中介，具体过程是：子组件A向父组件C发送事件"change"（数据在emit参数中），父组件C对子组件A进行"change"事件监听，监听到该事件后向子组件B传递数据。