本文介绍如何在Vue项目中实现点击字母索引时，左侧城市列表自动滚动到对应区域的功能。通过兄弟组件联动，使用事件总线（bus）进行非父子组件间通信，以及监听数据变化来控制滚动定位。
本来想一篇文章写完，但是又截图又分析什么的，如果用一篇文章写，太长了，估计都没耐心看完，所以分成了几篇来写。
这篇主要说的是实现点击右侧字母索引，左边能自动滚动到相应城市功能。
兄弟组件联动
去字母索引组件的循环的li部分添加一个点击事件，这个点击事件接收一个e的事件对象，拿到事件对象，可以先打印e.target.innerText，这个时候去浏览器看看。
点击的都会打印出来
此时点击字母索引中的任意一个字母，控制台会打印出相应字母的文字。
此时我们希望将字母传给list组件，(list组件就是城市列表组件)然后让list对应的区块显示出来。
list组件和字母索引组件是兄弟组件，这里就涉及到兄弟组件的传值，它们是非父子组件，可通过bus总线的形式来传值。
由于这里传递的数据比较简单，就是ABCD...，并且组件的层级不深，所以我们可以将字母索引组件的值传递给City这个父组件，然后父组件再传给list，这里的兄弟组件传值就变成了子组件传给父组件，父组件再传给另一个子组件的形式了。
字母索引组件传值给City父组件
给li定义一个点击事件，当点击字母的时候，向父组件派发一个change事件，这个事件带的内容就是e.target.innerText，
派发事件
然后去City父组件接收这个事件，用名为handleLetterChange的函数来接收&
最低0.47元/天 解锁文章
1416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
