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实现兄弟组件间的联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
jquery查找父元素、子元素(个人经验总结)
Apr 09 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
微信小程序如何通过用户授权获取手机号(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
Protoss建筑一览
2020/03/14 星际争霸
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
Javascript 继承实现例子
2009/08/12 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
javascript 数组排序函数sort和reverse使用介绍
2013/11/21 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
详解如何实现一个简单的 vuex
2018/02/10 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
[07:09]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant 选手采访
2021/03/11 DOTA
python实现simhash算法实例
2014/04/25 Python
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
python判断变量是否为列表的方法
2020/09/17 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
亲子阅读的活动方案
2014/08/15 职场文书
学生检讨书怎么写
2014/10/09 职场文书
明确岗位职责
2015/02/14 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
导游词之介休绵山
2019/12/31 职场文书
python中的None与NULL用法说明
2021/05/25 Python
mysql事务隔离级别详情
2021/10/24 MySQL
Golang 切片(Slice)实现增删改查
2022/04/22 Golang