- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- Vue框架中兄弟组件间联动怎样实现？
Vue框架中兄弟组件间联动怎样实现？
Admin 2022-10-13 群英技术资讯 380 次浏览
这篇文章主要讲解了“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错误捕获特性、错误对象等等内容，对大家学习和理解JavaScript错误捕获有一定的帮助，那么接下来就跟随小编来学习一下吧。
-
用JS怎么做个接金币游戏？
接金币游戏的游戏，相信不少朋友都有玩过，或者玩过类似的，也就是屏幕上方掉落进步，移动下方接金币区域来接住金币。那么如果我们用JavaScript如何实现呢？下面就给大家分享如何用JS做一个接金币游戏。
-
JS中怎么设置title的值，都有哪些方法？
JS中怎么设置title的值？JS中设置title的值的方法有很多，下文小编尝试了几种实现方式，示例代码有一定的参考价值，有需要的朋友可以了解看看，那么接下来就跟随小编一起学习一下吧。
-
用JS怎样实现类似淘宝tab切换栏的功能？
用JS怎样实现类似淘宝tab切换栏的功能？tab切换栏的功能还是比较实用的，例如淘宝页面的商品详情，规格参数和累计评价三个栏，点击不同的栏下面出现的内容不同，这样的设计的好处就是能让页面更整洁美观，接下来我们就看看这个效果要怎样做。
-
reactive与ref函数的应用场景分别是什么，该怎样用
这篇文章主要为大家介绍了Vue3 中有场景是 reactive 能做而 ref 做不了的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
