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

JavaScript 事件查询综合

Jul 13 Javascript

20个非常有用的PHP类库加速php开发

Jan 15 Javascript

Javascript面向对象之四继承

Feb 08 Javascript

jquery 清空file域示例(兼容个浏览器)

Oct 11 Javascript

javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码

Aug 04 Javascript

聊一聊JS中this的指向问题

Jun 17 Javascript

jquery 动态增加删除行的简单实例(推荐)

Oct 12 Javascript

常见的浏览器Hack技巧整理

Jun 29 Javascript

详解用Node.js写一个简单的命令行工具

Mar 01 Javascript

详解jQuery中的easyui

Sep 02 jQuery

js限制input只能输入有效的数字(第一个不能是小数点)

Sep 28 Javascript

vue中父子组件传值,解决钩子函数mounted只运行一次的操作

Jul 27 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动态分页函数，PHP开发分页必备啦

2011/11/07 PHP

Javascript里使用Dom操作Xml

2006/09/20 Javascript

jquery 插件人性化的消息显示

2008/01/21 Javascript

javascript 自动转到命名锚记

2009/01/10 Javascript

设置iframe的document.designMode后仅Firefox中其body.innerHTML为br

2012/02/27 Javascript

使用JavaScript修改浏览器URL地址栏的实现代码

2013/10/21 Javascript

纯js实现重发验证码按钮倒数功能

2015/04/21 Javascript

javascript实现回到顶部特效

2015/05/06 Javascript

JS模拟简易滚动条效果代码(附demo源码)

2016/04/05 Javascript

学习使用bootstrap3栅格系统

2016/04/12 Javascript

JavaScript中闭包的写法和作用详解

2016/06/29 Javascript

详解JavaScript模块化开发

2016/12/04 Javascript

vue里面使用mui的弹出日期选择插件实例

2018/09/16 Javascript

初探Vue3.0 中的一大亮点Proxy的使用

2018/12/06 Javascript

深入理解vue-class-component源码阅读

2019/02/18 Javascript

[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06

2020/11/09 DOTA

python调用新浪微博API项目实践

2014/07/28 Python

Python Web框架Flask中使用新浪SAE云存储实例

2015/02/08 Python

python实现红包裂变算法

2016/02/16 Python

Python基于递归实现电话号码映射功能示例

2018/04/13 Python

常用python爬虫库介绍与简要说明

2020/01/25 Python

Sofft鞋官网：世界知名鞋类品牌

2017/03/28 全球购物

生物科学专业个人求职信范文

2013/12/05 职场文书

历史专业个人求职信分享

2013/12/20 职场文书

财会自我鉴定范文

2013/12/27 职场文书

中秋节超市促销方案

2014/01/30 职场文书

简历中的自我评价范文

2014/02/05 职场文书

文艺演出策划方案

2014/06/07 职场文书

合作经营协议书范本

2014/09/16 职场文书

三孔导游词

2015/02/05 职场文书

任长霞观后感

2015/06/16 职场文书

教师学习十八届五中全会精神心得体会

2016/01/05 职场文书

解决Goland 同一个package中函数互相调用的问题

2021/05/06 Golang

Python实现查询剪贴板自动匹配信息的思路详解

2021/07/09 Python

BCL经典机 SONY ICF-5900W电路分析

2022/04/24 无线电

讲解Python实例练习逆序输出字符串

2022/05/06 Python