先放效果圖咯~

思路：如果是同層級兄弟元件B與C之間傳值的話，我們可以不用採用bus方法，通過B先向父元件A傳值，然後A再向子元件C傳值就可以實現。子元件向父元件傳值是通過this.$emit('事件名',要傳遞的引數值）發出事件，然後父元件監聽這個事件並進入事件處理程式；父元件向子元件傳值是通過屬性傳值，直接在父元件繫結一個屬性，然後子元件在props中接收這個屬性引數，就可以進行相應的事件處理了。

• 在開發城市選擇頁的時候，我想要實現點選右側字母列表中的字母就可以讓左邊的城市列表進入對應的字母項，這個時候就用到了兄弟元件的資料傳遞。

• 好啦！第一步實現上述功能後，接下來要繼續實現另一個功能啦~我們想實現在右側字母表上滑動滑鼠時，左側的城市列表項也會滑到對應字母塊的列表項。

思路：我們需要根據滑鼠滑動到哪個位置來計算此時滑鼠停留的位置對應的字母是什麼，因此我們需要計算第一個字母‘A’所在的位置高度startY以及滑鼠停留位置的高度touchY，然後通過計算兩者之差除以每個字母的高度Math.floor((touchY - this.startY) / 20)即可得到一個位置索引Index，最後根據這個索引就可以去List元件中找到對應項進行顯示。

首先在字母列表元件上繫結touchstart、touchmove、touchend三個事件來分別處理滑鼠滑動不同狀態下的響應。對此，我們需要定義一個標識類 touchStatus，當它值為true的時候才去進行touchMove的一些處理。為了能更方便地獲取到字母，我們在計算屬性中對cities進行for...in遍歷從而得到字母陣列letters:['A','B','C',...'Z']。

具體程式碼實現如下：

<template>
        <ul class="list">
            <li class="item" 
            v-for="item of letters" 
            :key="item"
            :ref="item" 
            @click="handleLetterClick"
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
            >{{item}}</li>
        </ul>
</template>

<script>
export default {
    name: 'CityAlphabet',
    props:{
        cities: Object,
    },
      //for..in遍歷輸出的就是物件中所有的屬性，在這裡可以理解為鍵名
   computed:{
        letters () {
            const letters = [ ]
            for( let i in this.cities ) {
                letters.push(i)
            }
            return letters
        }
    },
    data () {
        return{
            touchStatus: false,  //定義一個標識類，當它值為true的時候才去進行touchMove的一些處理
            startY :0,
            timer:null,
        }
    },
    updated(){
        this.startY=this.$refs['A'][0].offsetTop//offsetTop是首字母A距離.list元素頂部的距離
    },
    methods:{
        handleLetterClick (e) {
            this.$emit('change', e.target.innerText) 
        },
        handleTouchStart(){
            this.touchStatus = true
        },
        handleTouchMove(e){
            if(this.touchStatus ){
                if(this.timer){     //函式節流進行效能優化
                    clearTimeout(this.timer)
                }
                this.timer=setTimeout( ( ) => {
                     const touchY = e.touches[0].clientY -79  //e.touches[0]第0項獲取的是我們手指的一些資訊,clienY獲取的是滑鼠停止位置距離整個可視區域頂部的距離，減去Header和Search部分的高得到的就是滑鼠停止位置距離.list元素頂部的距離
                     const index = Math.floor((touchY - this.startY) / 20)
                     if (index >= 0 && index < this.letters.length) {
                           this.$emit('change', this.letters[index]) //向父元件觸發change事件
                }
                },16)
            }
        },
        handleTouchEnd(){
            this.touchStatus = false
        }
    },
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.list
    display:flex
    flex-direction:column
    justify-content:center
    position:absolute
    right:0
    bottom:0
    top:1.58rem
    width:.4rem
    .item
        line-height:.4rem
        text-align:center
        color:$bgColor
</style>
 

 今日最大的坑！！！因為我在元件中繫結事件時將函式進行了駝峰命名導致好幾個小時程式一直得不到想要的效果~哇~~晚上都快炸了，最終對著老師的視訊來回反覆仔細看了N遍才發現這個原因，改過來以後程式就對了~你說神奇不神奇，耐不住刨根的性子終於在這篇[vue中v-on後面跟著的函式名不可以用駝峰命名嗎？](http://www.caotama.com/98279.html)部落格中找到了原因，感謝這位道友為我解了惑吖~

原因：HTML是大小寫不敏感的，HTML中的屬性@touchStart會被解析為@touchstart，js會通過@touchStart去找，這樣當然是找不到的呀。 所以呀，vue中@後的函式名一般都是小寫，主要是因為解析的時候大寫會被解析成小寫，然後 js獲取的時候會根據駝峰命名去找就找不到了。