- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- Vue框架中兄弟组件间联动怎样实现？
Vue框架中兄弟组件间联动怎样实现？
Admin 2022-10-13 群英技术资讯 1133 次浏览
这篇文章主要讲解了“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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
React和Redux的关系是怎样，redux的核心概念是什么
这篇文章主要为大家介绍了React 和 Redux的关系，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
-
watch监听的基本用法是什么，怎样监听object
目录基本用法监听object使用deep参数重新赋值通过路径监听内部数据初始化变量触发监听回调总结Vue中可以使用监听器监听属性的变化，并根据属性变化作出响应。但一旦涉及到复杂数据的监听（如Object，但数组一般不需要，因为Vue针对数组做了特殊处理）时就比较复杂了，本文解释了使用watch监听属性变化的方法，包括复
-
用Vue框架怎么写一个简易的购物车
这篇文章主要为大家详细介绍了Vue.js框架实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
-
JS流程控制有几种，用法是什么？
目录一、选择结构if单分支语句if…else双分支语句if…elseif…else多分支语句switch多分支语句二、循环结构while循环语句do…while循环语句for循
-
vue项目中后端数据获取是怎样的
在前面随笔《循序渐进VUE+Element 前端应用开发之动态菜单和路由的关联处理》中介绍了在Vue + Element整合框架中，实现了动态菜单和动态路由的处理，从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定，菜单顺利弄好了，就需要进一步开发页面功能了，本篇随笔介绍一个案例，通过获取后端数据后，进行产品信息页面的处理。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册关注或联系群英网络
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
