编程 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 相关文章推荐

Jquery 插件开发笔记整理

Jan 17 Javascript

jQuery 名称冲突的解决方法

Apr 08 Javascript

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

Nov 14 Javascript

moment.js轻松实现获取当前日期是当年的第几周

Feb 05 Javascript

检查表单元素的值是否为空的实例代码

Jun 16 Javascript

Angular2 (RC4) 路由与导航详解

Sep 21 Javascript

bootstrap table之通用方法（时间控件，导出，动态下拉框，表单验证，选中与获取信息）代码分享

Jan 24 Javascript

Node+Express+MongoDB实现登录注册功能实例

Apr 23 Javascript

vue2.x+webpack快速搭建前端项目框架详解

Nov 30 Javascript

详解bootstrap-fileinput文件上传控件的亲身实践

Mar 21 Javascript

通过实例了解JS执行上下文运行原理

Jun 17 Javascript

el-form 多层级表单的实现示例

Sep 10 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图片上传程序

2008/03/27 PHP

让PHP支持断点续传的源码

2010/05/16 PHP

PHP使用CURL_MULTI实现多线程采集的例子

2014/07/29 PHP

php实现的Timer页面运行时间监测类

2014/09/24 PHP

使用新的消息弹出框blackbirdjs

2008/10/16 Javascript

jQuery 获取URL参数的插件

2010/03/04 Javascript

Javascript base64编码实现代码

2011/12/02 Javascript

JavaScript中发布/订阅模式的简单实例

2014/11/05 Javascript

jQuery中toggleClass()方法用法实例

2015/01/05 Javascript

javascript实现汉字转拼音代码分享

2015/04/20 Javascript

javascript实现校验文件上传控件实例

2015/04/20 Javascript

JS hashMap实例详解

2016/05/26 Javascript

微信小程序 Video API实例详解

2016/10/02 Javascript

用JS动态设置CSS样式常见方法小结(推荐)

2016/11/10 Javascript

防止重复发送 Ajax 请求

2017/02/15 Javascript

node.js实现登录注册页面

2017/04/08 Javascript

vue.js实例todoList项目

2017/07/07 Javascript

JQuery扩展对象方法操作示例

2018/08/21 jQuery

详解Vue This$Store总结

2018/12/17 Javascript

vue 实现cli3.0中使用proxy进行代理转发

2019/10/30 Javascript

[40:57]TI4 循环赛第二日 iG vs EG

2014/07/11 DOTA

python使用xlrd实现检索excel中某列含有指定字符串记录的方法

2015/05/09 Python

Python中用于计算对数的log()方法

2015/05/15 Python

Python中扩展包的安装方法详解

2017/06/14 Python

基于python时间处理方法(详解)

2017/08/14 Python

Python装饰器知识点补充

2018/05/28 Python

python利用pandas将excel文件转换为txt文件的方法

2018/10/23 Python

理肤泉美国官网：La Roche-Posay

2018/01/17 全球购物

语文教育专业推荐信范文

2013/11/25 职场文书

迟到早退检讨书

2014/02/10 职场文书

高校教师岗位职责

2014/03/18 职场文书

商务考察邀请函模板

2015/02/02 职场文书

2015年大学团支部工作总结

2015/05/13 职场文书

护理专业毕业自我鉴定

2019/08/12 职场文书

python数据分析之单因素分析线性拟合及地理编码

2022/06/25 Python

Java代码规范与质量检测插件SonarLint的使用

2022/08/05 Java/Android