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

JSON.stringify 语法实例讲解

Mar 14 Javascript

客户端js性能优化小技巧整理

Nov 05 Javascript

常用的Javascript数据验证插件

Aug 04 Javascript

Javascript对象字面量的理解

Jun 22 Javascript

js实现弹窗暗层效果

Jan 16 Javascript

node跨域请求方法小结

Aug 25 Javascript

基于Vue.js 2.0实现百度搜索框效果

Dec 28 Javascript

js最简单的双向绑定实例讲解

Jan 02 Javascript

JavaScript 下载svg图片为png格式

Jun 21 Javascript

详解vue-cli项目开发/生产环境代理实现跨域请求

Jul 23 Javascript

js实现掷骰子小游戏

Oct 24 Javascript

Javascript摸拟自由落体与上抛运动原理与实现方法详解

Apr 08 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作的文本留言本的例子(六)

2006/10/09 PHP

PHP mysql与mysqli事务使用说明分享

2013/08/17 PHP

PHP的openssl加密扩展使用小结(推荐)

2016/07/18 PHP

php图片添加水印例子

2016/07/20 PHP

关于PHP定时发送服务的解决办法

2017/04/23 PHP

PHP利用Socket获取网站的SSL证书与公钥

2017/06/18 PHP

Laravel学习教程之model validation的使用示例

2017/10/23 PHP

tp5框架使用cookie加密算法实现登录功能示例

2020/02/10 PHP

比较详细的javascript对象的property和prototype是什么一种关系

2007/08/06 Javascript

用jQuery技术实现Tab页界面之二

2009/09/21 Javascript

让ie6也支持websocket采用flash封装实现

2013/02/18 Javascript

jQuery实现公告文字左右滚动的实例代码

2013/10/29 Javascript

在jquery中的ajax方法怎样通过JSONP进行远程调用

2014/04/04 Javascript

jquery 3D 标签云示例代码

2014/06/12 Javascript

JavaScript中的立即执行函数表达式介绍

2015/03/15 Javascript

jquery.form.js实现将form提交转为ajax方式提交的方法

2015/04/07 Javascript

原生JavaScript制作微博发布面板效果

2016/03/11 Javascript

nodejs制作爬虫实现批量下载图片

2017/05/19 NodeJs

用js将long型数据转换成date型或datetime型的实例

2017/07/03 Javascript

JavaScript之事件委托实例(附原生js和jQuery代码)

2017/07/22 jQuery

bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题

2017/08/10 Javascript

nuxt.js 缓存实践

2018/06/25 Javascript

vue 中滚动条始终定位在底部的方法

2018/09/03 Javascript

微信小程序适配iphoneX的实现方法

2018/09/18 Javascript

详解新手使用vue-router传参时注意事项

2019/06/06 Javascript

Python卸载模块的方法汇总

2016/06/07 Python

Python使用getpass库读取密码的示例

2017/10/10 Python

kaggle+mnist实现手写字体识别

2018/07/26 Python

python修改FTP服务器上的文件名

2019/09/11 Python

Python程序控制语句用法实例分析

2020/01/14 Python

python自动下载图片的方法示例

2020/03/25 Python

pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)

2020/05/09 Python

英国领先的野生鸟类食品供应商：GardenBird

2018/08/09 全球购物

英文求职信结束语大全

2013/10/26 职场文书

自我评价范文分享

2014/01/04 职场文书

党员对十八届四中全会的期盼思想汇报范文

2014/10/17 职场文书