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

Prototype1.5 rc2版指南最后一篇之Position

Jan 10 Javascript

jqTransform form表单美化插件使用方法

Jul 05 Javascript

Event altKey,ctrlKey,shiftKey属性解析

Dec 18 Javascript

JavaScript中cookie工具函数封装的示例代码

Oct 11 Javascript

详解MVC如何使用开源分页插件（shenniu.pager.js）

Dec 16 Javascript

js实现导航栏中英文切换效果

Jan 16 Javascript

jQuery点击导航栏选中更换样式的实现代码

Jan 23 Javascript

jQuery Mobile漏洞会有跨站脚本攻击风险

Feb 12 Javascript

微信小程序自定义底部导航带跳转功能

Nov 27 Javascript

vue项目打包后怎样优雅的解决跨域

May 26 Javascript

微信小程序开发技巧汇总

Jul 15 Javascript

原生JS实现贪吃蛇小游戏

Mar 09 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

Zerg建筑一览

2020/03/14 星际争霸

PHP控制网页过期时间的代码

2008/09/28 PHP

phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法

2012/03/26 PHP

解析MySql与Java的时间类型

2013/06/22 PHP

php实现扫描二维码根据浏览器类型访问不同下载地址

2014/10/15 PHP

也说JavaScript中String类的replace函数

2011/09/22 Javascript

setTimeout函数兼容各主流浏览器运行执行效果实例

2013/06/13 Javascript

下拉列表选择项的选中在不同浏览器中的兼容性问题探讨

2013/09/18 Javascript

js实现浏览器的各种菜单命令比如打印、查看源文件等等

2013/10/24 Javascript

jquery动态添加option示例

2013/12/30 Javascript

分享一款基于jQuery的视频播放插件

2014/10/09 Javascript

js创建对象的方式总结

2015/01/10 Javascript

JS中JSON对象和String之间的互转及处理技巧

2016/04/06 Javascript

jQuery使用ajax跨域获取数据的简单实例

2016/05/18 Javascript

基于jQuery实现页面搜索功能

2020/03/26 Javascript

jQuery ajax实现省市县三级联动

2021/03/07 Javascript

jQuery实现简单的滑动导航代码(移动端)

2017/05/22 jQuery

详解angular笔记路由之angular-router

2017/09/12 Javascript

最新Javascript程序员面试试题和解题方法

2017/11/23 Javascript

Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法

2018/08/08 Javascript

vue2 v-model/v-text 中使用过滤器的方法示例

2019/05/09 Javascript

创建nuxt.js项目流程图解

2020/03/13 Javascript

vue2.0实现列表数据增加和删除

2020/06/17 Javascript

js实现滑动滑块验证登录

2020/07/24 Javascript

浅谈vue中$event理解和框架中在包含默认值外传参

2020/08/07 Javascript

Python实现对比不同字体中的同一字符的显示效果

2015/04/23 Python

Python 中导入csv数据的三种方法

2018/11/01 Python

python运行时强制刷新缓冲区的方法

2019/01/14 Python

python双向链表原理与实现方法详解

2019/12/03 Python

tensorflow 查看梯度方式

2020/02/04 Python

Ajax的工作原理

2015/12/04 面试题

小班下学期评语

2014/05/04 职场文书

应届大学生求职信

2014/07/20 职场文书

解放思想演讲稿

2014/09/11 职场文书

2015年药房工作总结

2015/04/25 职场文书

中秋联欢会主持词

2015/07/04 职场文书