兄弟组件间联动(以字母模块绑定城市列表模块为例)

兄弟组件间联动(以字母模块绑定城市列表模块为例)

City.vue中有Alphabel.vue和List.vue两个子组件

1、Alphabel.vue——绑定点击事件获取内容(点击的字母)传给City.vue

//添加click点击事件
<li class="item" v-for="(item,key) of cities" :key="key" @click="handleLetterClick">
       {{key}}
</li>

//mehtods里添加handleLetterClick方法
methods:{
        handleLetterClick(e){
            //点击元素获取的内容通过$emit向外触发
            this.$emit('change',e.target.innerText)
        }
    }

2、City.vue——接收Alphabel.vue向外触发的内容并传给List.vue

//添加letter属性把父组件接收到的数据传递给子组件List.vue 
<city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
//添加监听changge事件
<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
//data里
data () {
        return{
            cities:{},
            hotCities:[],
            letter:'',  // 添加letter数据
        }
    },
//methods定义changge事件
handleLetterChange (letter) {
    //父组件接收到子组件传递过来的数据
     this.letter = letter
}

3、List.vue——接收City.vue传递的数据，并通过Bscroll自带的scrollToElement方法，自动滚动到某个元素上

//列表循环区添加ref
<div class="area"  v-for="(item,key) of cities" :key="key" :ref="key">
props:{
        hot:Array,
        cities:Object,
        letter:String  //接收父组件传递的letter
    },
//添加vue自带的监听器,监听letter的改变
watch:{
        letter (){
            //如果letter不为空时
            if(this.letter){
                //通过$refs获取到内容所在的区域,但是获取的是数组,后面加[0]就能获取到元素
                const element = this.$refs[this.letter][0]
                //调用Bscroll的scrollToElement方法,自动滚动到某个元素上
                this.scroll.scrollToElement(element)
            }
        }
    }