- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- Vue框架中兄弟组件间联动怎样实现？
Vue框架中兄弟组件间联动怎样实现？
Admin 2022-10-13 群英技术资讯 680 次浏览
这篇文章主要讲解了“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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
JS的宏任务和微任务是什么，队列是怎样的
目录前言宏任务宏任务队列微任务微任务队列Event-Loop执行顺序结语前言首先我们要了解javascript是一个单线程的脚本语言，也就是说我们在执行代码的过程中不会出现同时进行两个进程（执行两段代码）。Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）
-
在jquery中可以给一个元素设置点击事件吗
在jquery中可以给一个元素设置点击事件吗在jquery中可以给一个元素设置点击事件设置方法如下：1、获取指定的元素对象语法为：$("selector")2、给获取到的元素对象添加点击事件
-
JS中的Map与WeakMap类型的用法是什么？
这篇文章主要给大家分享JS中的Map与WeakMap类型的用法，文中示例代码介绍的非常详细，对大家学习Map与WeakMap类型的使用和创建等操作有一定的帮助，感兴趣的朋友可以参考，希望大家阅读完这篇文章能有所收获，下面我们一起来学习一下吧。
-
ES5和ES6中的apply异同在哪？一文带你了解
ES5和ES6中的apply异同在哪？在ES6中，新增了一个全局、内建、不可构造的Reflect对象，而且还提供了其下一系列可被拦截的操作方法。而其中的一个方法就是Reflect.apply()，我们知道ES5中也有apply，那么Reflect.apply()和ES5的Function.prototype.apply()有哪些区别和相同的地方呢？
-
如何使用第三方库 react-activation回到在先前的浏览位置上
本文主要介绍了react实现组件状态缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
