Vue实现 兄弟组件间的联动效果

一、实现的效果

点击右侧的字母，左侧的城市列表也会随之变化字母所对应的区域；
在右侧字母区域进行滚动，左侧的城市列表也会随之滚动到字母所对应的区域；

二、所用的插件

better-scroll插件：https://github.com/ustbhuangyi/better-scroll

三、点击字母列表区随之变化的实现

组件间的关系

右侧字母控制区域存在于我的Alphabet.vue子组件；
左侧城市列表联动区域存在于我的List.vue子组件；
这两个组件共同存在于我的City.vue父组件；

实现的逻辑和思路

在Alphabet.vue字母组件中给每个字母绑定单击事件；
获取到当前单击的字母，并传递给父组件City.vue；
以父组件City.vue为桥梁，将其传递给城市列表List.vue组件；
在List.vue城市列表组件中拿到这个字母，使用better-scroll插件完成滚动；

具体的代码

// Alphabet.vue字母列表组件
<template>
  <ul class="list">
    <li class="item"
      v-for="item of letters"
      :key="item"
      @click="handleLetterClick">	// 给每个字母绑定单击事件
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {	// 从父组件获取到的数据
    cities: Object
  },
  computed: {	// 使用计算属性将获取到的对象改造成字母数组
    letters () {
      const letters = []
      for (let key in this.cities) {
        letters.push(key)
      }
      return letters
    }
  },
  methods: {
    handleLetterClick (e) {	// 单击字母就向父组件触发一个change事件，并将所单击的字母传递给父组件
      this.$emit('change', e.target.innerText)
    }
  }
}
</script>

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

// City.vue 父组件
<template>
  <div>
    <city-header></city-header>
    <city-search></city-search>
    <city-list :hotCities="hotCities" :cities="cities" :letter="letter"></city-list>
    // 使用 :letter 属性绑定的方法，将所单击的字母传递给城市列表List.vue子组件
    // 监听子组件的change事件，一旦子组件有字母被单击就执行handleLetterChange事件
    <city-alphabet :cities="cities" @change="handleLetterChange">	</city-alphabet>
  </div>
</template>

<script>
import axios from 'axios'
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
import CityAlphabet from './components/Alphabet'
export default {
  name: 'City',
  components: {
    CityHeader,
    CitySearch,
    CityList,
    CityAlphabet
  },
  data () {
    return {
      hotCities: [],
      cities: {},
      letter: ''	//在这里定义一个letter变量
    }
  },
  methods: {	
    getCityInfo () {	// 这里都是获取数据的方法，可以不用关注
      axios.get('/api/city.json')
        .then(this.handleGetCityInfoSucc)
    },
    handleGetCityInfoSucc (res) {	// 这里都是获取数据的方法，可以不用关注
      if (res.data.ret && res.data.data) {
        const data = res.data.data
        this.hotCities = data.hotCities
        this.cities = data.cities
      }
    },
    handleLetterChange (letter) {	// 监听到字母单击，接收子组件传递的字母，并将这个字母存入data的letter变量中
      this.letter = letter
    }
  },
  mounted () {
    this.getCityInfo()
  }
}
</script>

<style lang="stylus" scoped>

</style>

// List.vue 城市列表组件
<template>
  <div class="list" ref="wrapper">	//注意，如果需要使用better-scroll插件的话，就需要将所有滚动区域包裹在一个外部容器内
    <div>
      <div class="area">
        <div class="title border-topbottom">当前城市</div>
        <div class="button-list">
          <div class="button-wrapper">
            <div class="button">北京</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="button-wrapper" v-for="item of hotCities" :key="item.id">
            <div class="button">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="area" v-for="(item, key) of cities" :key="key" :ref="key">
        <div class="title border-topbottom">{{ key }}</div>
        <div class="item-list" v-for="innerItem of item" :key="innerItem.id">
          <div class="item border-bottom">{{ innerItem.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入 better-scroll 插件，提前使用 npm install better-scroll -S 进行安装
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hotCities: Array,
    cities: Object,
    letter: String	// 接收父组件传递过来的数据，即当前单击的字母
  },
  mounted () {	// 根据better-scroll官网的使用方法进行使用，首先进行初始化
    this.scroll = new Bscroll(this.$refs.wrapper)
  },
  watch: {	// 通过事件侦听器进行侦听，一旦letter发生变化，就进行滚动
    letter () {
      if (this.letter) {
        const element = this.$refs[this.letter][0]	// 获取到单击字母letter所对应的城市列表区域的DOM元素
        this.scroll.scrollToElement(element)	// 使用better-scroll插件的方法进行滚动
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.border-topbottom
  &:before
    border-color: #cccccc
  &:after
    border-color: #cccccc
.border-topbottom
  &:before
    border-color: #cccccc
.list
  overflow: hidden
  position: absolute
  top: 1.58rem
  left: 0
  right: 0
  bottom: 0
  .title
    line-height: .54rem
    background: #eeeeee
    padding-left: .2rem
    color: #666
    font-size: .26rem
  .button-list
    overflow: hidden
    padding: .1rem .6rem .1rem .1rem
    .button-wrapper
      float: left
      width: 33.33%
      .button
        padding: .1rem 0
        margin: .12rem
        text-align: center
        border: .02rem solid #cccccc
        border-radius: .06rem
  .item-list
    .item
      line-height: .76rem
      padding-left: .2rem
</style>

四、鼠标在字母列表区之间滚动，城市列表区域也随之滚动

实现的逻辑和思路

在以上代码的基础上，进一步实现联动滚动效果

具体的代码

// 这里只需要在Alphabet.vue字母列表组件进行进一步修改
<template>
  <ul class="list">
    <li class="item"
      v-for="item of letters"
      :key="item"
      :ref="item"	//添加一个ref属性
      @click="handleLetterClick"
      @touchstart="handleTouchStart"	// 添加三个滚动事件
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  data () {
    return {
      touchStatus: false	//添加一个滚动标志位
    }
  },
  computed: {
    letters () {
      const letters = []
      for (let key in this.cities) {
        letters.push(key)
      }
      return letters
    }
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
    },
    handleTouchStart () {	// 开始滚动时将标志位置为true
      this.touchStatus = true
    },
    handleTouchMove (e) {
      if (this.touchStatus) {
        const startY = this.$refs['A'][0].offsetTop	
        // 获取字母A距离顶部的距离
        const touchY = e.touches[0].clientY - 79	
        // 获取鼠标滚动到的字母距离顶部的位置（减去79减掉的是这里的header的高度，clientY获取到的高度包括了页面中的header的标题和搜索框区域）
        const index = Math.floor((touchY - startY) / 20)	
        // 计算字母的索引值
        if (index >= 0 && index < this.letters.length) {	
        // 如果索引值大于0，并且小于总字母数，则触发父组件的change事件，并传递鼠标滚动到的字母
          this.$emit('change', this.letters[index])
        }
      }
    },
    handleTouchEnd () {	// 滚动结束将标志位置为false
      this.touchStatus = false
    }
  }
}
</script>