- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- Vue框架中兄弟组件间联动怎样实现？
Vue框架中兄弟组件间联动怎样实现？
Admin 2022-10-13 群英技术资讯 1214 次浏览
这篇文章主要讲解了“Vue框架中兄弟组件间联动怎样实现？”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue框架中兄弟组件间联动怎样实现？”吧！需求说明
如图，我想要实现当点击字母L，页面定位到L开头的城市名
Do it
1.找到字母表的页面
在html标签绑定一个click事件，在js中定义一个方法，并使用参数e获取点击的字母。当在页面点击时，console出来
效果如下
2.通过city这个父页面，进行列表页和字母表页面的值传递
<1>在字母表页定义一个监听方法
<2>进入city页面，在html中绑定一个监听事件
在js中编写这个事件的方法
打开页面，可以看到没有问题，city页面监听到了字母表页面的点击
<3>city父页面把字母表页面的请求转发给list页面
首先我们要在city页面定义一个letter变量，然后在方法中定义用这个变量接受letter
然后还是city页面，我们要在html中绑定这个变量
3.子组件获取父组件传递过来的值
父组件传递过来了一个letter之后，子组件就要接受这个letter。
首先在list页面中先定义letter，然后利用监听器，一旦letter变化，只要letter不是空，那么就让滚动条滚动到这个元素的起始位置
最后记得在城市列表区域内注册一个引用信息:ref=key，用来监听你选中的key值
保存后，实现了联动效果。
到此这篇关于“Vue框架中兄弟组件间联动怎样实现？”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
JavaScript中方法和函数的用法一样吗
方法与对象绑定的，不能单独引用，只能通过对象调用。功能独立，可单独引用。在方法中，this表示该方法所属的对象。在函数中，this代表整体对象。
-
vue路由懒加载怎么理解，有哪些实现方式？
这篇文章主要给大家介绍的关于vue路由懒加载的内容，很多刚接触vue的朋友，可能对于vue路由懒加载是什么以及实现方法不是很清楚，因此下面小编就带大家来了解一下。
-
Vue大文件上传的操作过程是什么，如何进行断点续传
文件上传在很多项目中都用的到，如果是几M的很快就传送完毕，如果是大文件呢？本文就介绍了Vue 大文件上传和断点续传的实现，感兴趣的可以了解一下
-
用JS+HTML+CSS写音乐播放器的代码是什么
本文实例为大家分享了vue + element ui实现锚点定位的具体代码，供大家参考，具体内容如下效果HTML代码!--播放器--div id=player !--播放控件-- div id=playerControl div class=playerImg img s
-
vue和小程序有哪些不一样？
vue跟小程序的区别：1、vue一般会在created或者mounted中请求数据，而在小程序会在onLoad或onShow中请求数据；2、vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号，而小程序绑定某个变量的值为元素属性时，会用两个大括号括起来；3、vue用“v-if”和“v-show”控制元素的显示和隐藏，小程序用“wx-if”和hidden控制。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
7x24小时售前：400-678-4567
7x24小时售后：0668-2555666
24小时QQ客服
群英微信公众号
CNNIC域名投诉举报处理平台
服务电话：010-58813000
服务邮箱：service@cnnic.cn
投诉与建议：0668-2555555
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 ICP核准（ICP备案）粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
