兄弟组件的联动（监听器）

// 子组件a
// 给每一项都天剑click事件
<li class="item" v-for="(item, key) of cities" :key="key" @click="handleLetterClick">
 {
    
    {
    
    key}}
</li>

methods: {
    
    
// 点击的时候回接收到一个e的事件对象
// 通过this.$emit向外触发事件 事件名为change 事件携带的内容e.target.innerText
      this.$emit('chenge, e.target.innerText')
    handleLetterClick (e) {
    
    
      console.log(e.target.innerText)
    }
  }
 // 父组件来监听这个事件
 <city-alphabet :cities="cities" @change="handleLetterClick"></city-alphabet>
methods: {
    
    
// 父组件接收子组件传过来的值
	handleLetterClick (letter) {
    
    
      console.log(letter)
    }
}
// 父组件通过属性把值传给另一个子组件
// 在data中   letter: ''
handleLetterClick (letter) {
    
    
      this.letter = letter
      console.log(letter)
}
// 最后就是正常的父传子了

监听器 （联动最后一步）

// 给我们遍历的对象加上ref
<div class="area" v-for="(item, key) of cities" :key="key" :ref="key">
    <div class="title border-topbottom">{
    
    {
    
    key}}</div>
    <div class="item-list">
    <div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id">{
    
    {
    
    innerItem.name}}</div>
    </div>
  </div>
 </div>

 watch: {
    
    
 // 当letter发生改变
    letter () {
    
    
    // better-scroll提供给我们这个方法可以让他自动滚动到哪个元素上
	    if (this.letter) {
    
    
	    // 因为这样获取的是一个数组 而better-scroll提供的方法只能是dom元素或dom选择器所以[0]
	    	const element = this.$refs[this.letter][0]
	        this.scroll.srollToElement(element)
     	 }
    }
  }