编程 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实现用户名无刷新验证的小例子

Mar 22 Javascript

javascript动态控制服务器控件实例

Sep 05 Javascript

JS制作手机端自适应缩放显示

Jun 11 Javascript

javascript框架设计之种子模块

Jun 23 Javascript

javascript实现输出指定行数正方形图案的方法

Aug 03 Javascript

JavaScript 对象字面量讲解

Jun 06 Javascript

jQuery 移动端拖拽（模块化开发，触摸事件，webpack）

Oct 28 Javascript

Jquery中attr与prop的区别详解

May 27 jQuery

Node.JS中快速扫描端口并发现局域网内的Web服务器地址（80）

Sep 18 Javascript

web页面和微信小程序页面实现瀑布流效果

Sep 26 Javascript

小程序实现多选框功能

Oct 30 Javascript

vue+canvas实现移动端手写签名

May 21 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环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较？

2011/10/17 PHP

php连接函数implode与分割explode的深入解析

2013/06/26 PHP

ThinkPHP实现多数据库连接的解决方法

2014/07/01 PHP

php实现以只读方式打开文件的方法

2015/03/16 PHP

ThinkPHP中Widget扩展的两种写法及调用方法详解

2017/05/04 PHP

Yii2 如何在modules中添加验证码的方法

2017/06/19 PHP

利用php的ob缓存机制实现页面静态化方法

2017/07/09 PHP

thinkPHP5框架闭包函数与子查询传参用法示例

2018/08/02 PHP

PHP多进程简单实例小结

2019/11/09 PHP

url 特殊字符传递参数解决方法

2010/01/01 Javascript

腾讯UED 漂亮的提示信息效果代码

2011/09/12 Javascript

jQuery实现切换页面布局使用介绍

2011/10/09 Javascript

纯JavaScript基于notie.js插件实现消息提示特效

2016/01/18 Javascript

JavaScript html5 canvas画布中删除一个块区域的方法

2016/01/26 Javascript

Javascript实现登录记住用户名和密码功能

2017/03/22 Javascript

vue 封装自定义组件之tabal列表编辑单元格组件实例代码

2017/09/07 Javascript

webpack常用构建优化策略小结

2019/11/21 Javascript

echarts 使用formatter 修改鼠标悬浮事件信息操作

2020/07/20 Javascript

vue+element使用动态加载路由方式实现三级菜单页面显示的操作

2020/08/04 Javascript

[02:16]DOTA2英雄基础教程干扰者

2014/01/15 DOTA

[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG

2014/07/11 DOTA

便捷提取python导入包的属性方法

2018/10/15 Python

Python 硬币兑换问题

2019/07/29 Python

Anaconda＋vscode＋pytorch环境搭建过程详解

2020/05/25 Python

python wsgiref源码解析

2021/02/06 Python

美国知名奢侈美容品牌零售商：Cos Bar

2017/04/21 全球购物

Clarria化妆品官方网站：购买天然和有机化妆品系列

2018/04/08 全球购物

房地产出纳岗位职责

2013/12/01 职场文书

计算机操作自荐信

2013/12/07 职场文书

中学教师自我鉴定

2014/02/07 职场文书

工业设计毕业生自荐信

2014/04/13 职场文书

廉洁自律心得体会2016

2016/01/13 职场文书

javaScript Array api梳理

2021/03/31 Javascript

nginx反向代理时如何保持长连接

2021/03/31 Servers

threejs太阳光与阴影效果实例代码

2022/04/05 Javascript

Python Flask实现进度条

2022/05/11 Python