- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- Vue框架中兄弟组件间联动怎样实现？
Vue框架中兄弟组件间联动怎样实现？
Admin 2022-10-13 群英技术资讯 1290 次浏览
这篇文章主要讲解了“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全局函数都有哪些，如何使用？
这篇文章我们来了解JavaScript全局函数的相关内容，JavaScript中全局函数有很多，例如isNaN()用于检查某个值是否是数字、Number()用于把对象的值转换为数字等等，接下来我们就来认识一下这些全局函数，以及应该怎样使用，下文有很详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！
-
jQuery替换类样式怎样实现？教你两种方法
这篇文章我们来了解jQuery中实现替换类样式的方法，这里介绍两种方法，分别是addClass()方法和attr()方法，具体怎样实现呢？下文代码介绍的很详细，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！
-
JS中var、let、const关键字的使用有哪些不同
在ES6（ES2015）出现之前，JavaScript中声明变量就只有通过var关键字，函数声明是通过function关键字，而在ES6之后，声明的方式有var、let、const、function、class，本文主要讨论var、let和const之间的区别
-
vue3中watch如何使用，与watchEffect不同及联系是怎样
本篇文章主要通过 Options API 和 Composition API 对比 watch 的使用方法，让大家快速掌握 vue3 中 watch 新用法,需要的朋友可以参考一下哦，希望对大家有所帮助
-
用JS怎样实现类似淘宝tab切换栏的功能？
用JS怎样实现类似淘宝tab切换栏的功能？tab切换栏的功能还是比较实用的，例如淘宝页面的商品详情，规格参数和累计评价三个栏，点击不同的栏下面出现的内容不同，这样的设计的好处就是能让页面更整洁美观，接下来我们就看看这个效果要怎样做。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
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
