Vue中兄弟组件间的传值

兄弟间的传值实质上就是父子组件间的传值
先将A组件的值传到父组件，然后父组件传给B组件

用我做的一个小demo说一下

这里要点击右侧的CityAlphabet中的字母，将字母传给CityList并跳转到相应的位置
首先是Alphabet

<template>
	<ul class="list">
		<li class="item" 
			v-for="item of letters" 
			:key="item" 
		>
			{{ item }}
		</li>
	</ul>
</template>

这里的item是循环出来的是A,B,C···
给每一项加上点击事件获取被点击的字母就可以传给父组件了

<template>
	<ul class="list">
		<li class="item" 
			v-for="item of letters" 
			:key="item" 
			@click="handleLetterClick"
		>
			{{ item }}
		</li>
	</ul>
</template>

methods: {
	handleLetterClick: function(e) {
		//将被点击的元素的内容传给父组件
		this.$emit('change', e.target.innerText)
	},
}

然后去父组件中接收

<template>
	<div>
		<city-header></city-header>
		<city-search></city-search>
		<city-list :cities="cities" :hot="hotCities"></city-list>
		<!-- 用 @change 监听是否传值 -->
		<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
	</div>
</template>

data() {
	return {
		//定义一个空值接收传来的值
		letter:''
	}
},
methods:{
	handleLetterChange(letter){
		//将传过来的值赋给定义的空值
		this.letter = letter
	}
}

这时letter就是获取到的值
再传给CityList组件

<template>
	<div>
		<city-header></city-header>
		<city-search></city-search>
		<!-- 将letter的值传给CityList -->
		<city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
		<!-- 用 @change 监听是否传值 -->
		<city-alphabet :cities="cities" @change="handleLetterChange"></city-alphabet>
	</div>
</template>

最后去CityList中接收就可以了

props: {
	//传进来的值必须是字符串
	letter:String
},
mounted() {
	this.scroll = new Bscroll(this.$refs.wrapper)
},
//用watch去监听letter的变化
watch:{
	letter(){
		if(this.letter){
			//获取每个组的HTML元素
			const element = this.$refs[this.letter][0]
			//用better-scroll中的方法进行切换
			this.scroll.scrollToElement(element)
		}
	}
}

这样就可以实现点击后快速定位到某些元素位置的功能了
（省略了部分无关代码）