编程 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 返回布尔值Is()条件判断方法代码

May 14 Javascript

原生js和jQuery随意改变div属性style的名称和值

Oct 22 Javascript

javascript清空table表格的方法

May 14 Javascript

js实现纯前端的图片预览

Apr 27 Javascript

文件上传插件SWFUpload的使用指南

Nov 29 Javascript

使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解

Jul 24 Javascript

vue2.0使用swiper组件实现轮播效果

Nov 27 Javascript

JavaScript实现元素滚动条到达一定位置循环追加内容

Dec 28 Javascript

node.js之基础加密算法模块crypto详解

Sep 11 Javascript

highcharts.js数据绑定方式代码实例

Nov 13 Javascript

微信小程序实现图片压缩

Dec 03 Javascript

vue中的双向数据绑定原理与常见操作技巧详解

Mar 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获取twitter最新消息的方法

2015/04/14 PHP

PHP定时执行任务实现方法详解（Timer）

2015/07/30 PHP

详解如何实现Laravel的服务容器的方法示例

2019/04/15 PHP

PHP设计模式之外观模式（Facade）入门与应用详解

2019/12/13 PHP

由prototype_1.3.1进入javascript殿堂－类的初探

2006/11/06 Javascript

十分钟打造AutoComplete自动完成效果代码

2009/12/26 Javascript

JQuery扩展插件Validate 5添加自定义验证方法

2011/09/05 Javascript

JS获取键盘上任意按键的值(实例代码)

2013/11/12 Javascript

jquery序列化表单去除指定元素示例代码

2014/04/10 Javascript

js中的caller和callee属性介绍和例子

2014/06/07 Javascript

js实现拖拽效果

2015/02/12 Javascript

jQuery实现的导航下拉菜单效果示例

2016/09/05 Javascript

微信小程序使用第三方库Immutable.js实例详解

2016/09/27 Javascript

利用浮层使select不可选的实现方法

2016/12/03 Javascript

Vue.js实现表格动态增加删除的方法（附源码下载）

2017/01/20 Javascript

微信小程序如何获知用户运行小程序的场景教程

2017/05/17 Javascript

Require.JS中的几种define定义方式示例

2017/06/01 Javascript

使用webpack-dev-server处理跨域请求的方法

2018/04/18 Javascript

vue项目中使用lib-flexible解决移动端适配的问题解决

2018/08/23 Javascript

详解webpack打包nodejs项目(前端代码)

2018/09/19 NodeJs

微信小程序实现form表单本地储存数据

2019/06/27 Javascript

微信小程序与公众号卡券/会员打通的问题

2019/07/25 Javascript

layui-table对返回的数据进行转变显示的实例

2019/09/04 Javascript

Python开发编码规范

2006/09/08 Python

python基础while循环及if判断的实例讲解

2017/08/25 Python

python之拟合的实现

2019/07/19 Python

python实现超级玛丽游戏

2020/03/18 Python

世界首屈一指的在线男士内衣权威：HisRoom

2017/08/05 全球购物

美味咖啡的顶级烘焙师：Cafe Britt

2018/03/15 全球购物

牵手50香港：专为黄金岁月的单身人士而设的交友网站

2020/08/14 全球购物

C&A巴西网上商店：时尚、衣服、手机和鞋子

2020/06/07 全球购物

学习雷锋倡议书

2014/04/15 职场文书

2015秋季开学演讲稿范文

2015/07/16 职场文书

《秋思》教学反思

2016/02/23 职场文书

如何写好竞聘报告

2019/04/03 职场文书

基于Python绘制子图及子图刻度的变换等的问题

2021/05/23 Python