编程 Javascript

Vue实现兄弟组件间的联动效果

Posted in Javascript onJanuary 21, 2020

需求说明

如图，我想要实现当点击字母L，页面定位到L开头的城市名

Vue实现兄弟组件间的联动效果

Do it

1.找到字母表的页面

在html标签绑定一个click事件，在js中定义一个方法，并使用参数e获取点击的字母。当在页面点击时，console出来

Vue实现兄弟组件间的联动效果

效果如下

Vue实现兄弟组件间的联动效果

2.通过city这个父页面，进行列表页和字母表页面的值传递

<1>在字母表页定义一个监听方法

Vue实现兄弟组件间的联动效果

<2>进入city页面，在html中绑定一个监听事件

Vue实现兄弟组件间的联动效果

在js中编写这个事件的方法

Vue实现兄弟组件间的联动效果

打开页面，可以看到没有问题，city页面监听到了字母表页面的点击

Vue实现兄弟组件间的联动效果

<3>city父页面把字母表页面的请求转发给list页面

首先我们要在city页面定义一个letter变量，然后在方法中定义用这个变量接受letter

Vue实现兄弟组件间的联动效果

然后还是city页面，我们要在html中绑定这个变量

Vue实现兄弟组件间的联动效果

3.子组件获取父组件传递过来的值

父组件传递过来了一个letter之后，子组件就要接受这个letter。

首先在list页面中先定义letter，然后利用监听器，一旦letter变化，只要letter不是空，那么就让滚动条滚动到这个元素的起始位置

Vue实现兄弟组件间的联动效果

最后记得在城市列表区域内注册一个引用信息:ref=key，用来监听你选中的key值

Vue实现兄弟组件间的联动效果

保存后，实现了联动效果。

Vue实现兄弟组件间的联动效果

总结

以上所述是小编给大家介绍的Vue实现兄弟组件间的联动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Vue实现兄弟组件间的联动效果

- Author -

刘桐ssss

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

静态页面的值传递(三部曲)

Sep 25 Javascript

远离JS灾难css灾难之 js私有函数和css选择器作为容器

Dec 11 Javascript

javascript中加号(+)操作符的一些神奇作用

Jun 06 Javascript

JQuery跳出each循环的方法

Apr 16 Javascript

jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

Jan 21 Javascript

JavaScript 闭包详细介绍

Sep 28 Javascript

微信小程序request出现400的问题解决办法

May 23 Javascript

node.js中express-session配置项详解

May 31 Javascript

react的滑动图片验证码组件的示例代码

Feb 27 Javascript

vue 对象添加或删除成员时无法实时更新的解决方法

May 01 Javascript

vue.js 解决v-model让select默认选中不生效的问题

Jul 28 Javascript

小程序实现点击tab切换左右滑动

Nov 16 Javascript

微信小程序如何通过用户授权获取手机号(getPhoneNumber)

Jan 21 #Javascript

微信小程序如何实现精确的日期时间选择器

Jan 21 #Javascript

微信小程序如何实现点击图片放大功能

Jan 21 #Javascript

微信小程序修改checkbox的样式代码实例

Jan 21 #Javascript

微信小程序全选多选效果实现代码解析

Jan 21 #Javascript

js判断在哪个浏览器打开项目的方法

Jan 21 #Javascript

浅谈Vue.use到底是什么鬼

Jan 21 #Javascript

You might like

PHP初学者头疼问题总结

2006/07/08 PHP

PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图

2017/05/15 PHP

javascript下function声明一些小结

2007/12/28 Javascript

关于取不到由location.href提交而来的上级页面地址的解决办法

2009/07/30 Javascript

Extjs 几个方法的讨论

2010/01/28 Javascript

javascript利用控件对windows的操作实现原理与应用

2012/12/23 Javascript

IE8对JS通过属性和数组遍历解析不一样的地方探讨

2013/05/06 Javascript

原生javascript实现无间缝滚动示例

2014/01/28 Javascript

JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】

2016/08/23 Javascript

AngularJs Forms详解及简单示例

2016/09/01 Javascript

javascript中的深复制详解及实例分析

2016/12/29 Javascript

使用koa2创建web项目的方法步骤

2019/03/12 Javascript

Vue解析剪切板图片并实现发送功能

2020/02/04 Javascript

微信小程序上传帖子的实例代码(含有文字图片的微信验证)

2020/07/11 Javascript

js实现购物车商品数量加减

2020/09/21 Javascript

JS如何操作DOM基于表格动态展示数据

2020/10/15 Javascript

[02:29]完美世界高校联赛上海赛区回顾

2015/12/15 DOTA

python client使用http post 到server端的代码

2013/02/10 Python

python学习手册中的python多态示例代码

2014/01/21 Python

把MySQL表结构映射为Python中的对象的教程

2015/04/07 Python

深入学习Python中的装饰器使用

2016/06/20 Python

Python字符串通过'+'和join函数拼接新字符串的性能测试比较

2019/03/05 Python

django中账号密码验证登陆功能的实现方法

2019/07/15 Python

对Python 中矩阵或者数组相减的法则详解

2019/08/26 Python

关于Python核心框架tornado的异步协程的2种方法详解

2019/08/28 Python

解决pyshp UnicodeDecodeError的问题

2019/12/06 Python

python 通过手机号识别出对应的微信性别(实例代码)

2019/12/22 Python

python opencv角点检测连线功能的实现代码

2020/11/24 Python

欧洲、亚洲、非洲和拉丁美洲的度假套餐：Great Value Vacations

2019/03/30 全球购物

建筑实习自我鉴定

2013/10/18 职场文书

班级活动策划书

2014/02/06 职场文书

市场开发计划书

2014/05/07 职场文书

房地产工程部经理岗位职责

2015/04/09 职场文书

2015年禁毒工作总结

2015/04/30 职场文书

2015年防灾减灾工作总结

2015/07/24 职场文书

利用python进行数据加载

2021/06/20 Python