编程 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对象实现深复制的方法

Oct 24 Javascript

jquery用offset()方法获得元素的xy坐标

Sep 06 Javascript

EasyUI实现二级页面的内容勾选的方法

Mar 01 Javascript

javascript常用的方法整理

Aug 20 Javascript

工作中比较实用的JavaScript验证和数据处理的干货(经典)

Aug 03 Javascript

微信小程序小组件基于Canvas实现直播点赞气泡效果

May 29 Javascript

vue watch深度监听对象实现数据联动效果

Aug 16 Javascript

vue.extend与vue.component的区别和联系

Sep 19 Javascript

vue实现吸顶、锚点和滚动高亮按钮效果

Oct 21 Javascript

jQuery鼠标滑过横向时间轴样式(代码详解)

Nov 01 jQuery

JS实现扫码枪扫描二维码功能

Jan 03 Javascript

vue学习笔记之作用域插槽实例分析

Feb 01 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

thinkphp 一个页面使用2次分页的实现方法

2013/07/15 PHP

php pdo连接数据库操作示例

2019/11/18 PHP

Prototype Number对象学习

2009/07/19 Javascript

基于jquery的多彩百分比动态进度条投票效果显示效果实现代码

2011/08/28 Javascript

js 获取计算后的样式写法及注意事项

2013/02/25 Javascript

JS实现的省份级联实例代码

2013/06/24 Javascript

JavaScript立即执行函数的三种不同写法

2014/09/05 Javascript

Jquery中使用show()与hide()方法动画显示和隐藏图片

2015/10/08 Javascript

Vue 短信验证码组件开发详解

2017/02/14 Javascript

js原生Ajax的封装和原理详解

2017/03/11 Javascript

ES6新特性之模块Module用法详解

2017/04/01 Javascript

JS开发中基本数据类型具体有哪几种

2017/10/19 Javascript

浅析Proxy可以优化vue的数据监听机制问题及实现思路

2018/11/29 Javascript

JavaScript解析及序列化JSON的方法实例分析

2019/01/04 Javascript

JS扁平化输出数组的2种方法解析

2019/09/17 Javascript

webpack HappyPack实战详解

2019/10/08 Javascript

[02:16]深扒TI7聊天轮盘语音出处2

2017/05/11 DOTA

[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19

2018/08/21 DOTA

详解Python3中字符串中的数字提取方法

2017/01/14 Python

Python爬虫之正则表达式的使用教程详解

2018/10/25 Python

Python实现多线程/多进程的TCP服务器

2019/09/03 Python

使用豆瓣源来安装python中的第三方库方法

2021/01/26 Python

CSS3中颜色线性渐变实战

2015/07/18 HTML / CSS

瑞典度假品牌：OAS

2019/05/28 全球购物

zooplus德国：便宜地订购动物用品、动物饲料、动物食品

2020/05/06 全球购物

利用指针变量实现队列的入队操作

2012/04/07 面试题

手机业务员岗位职责

2013/12/13 职场文书

女方回门宴答谢词

2014/01/14 职场文书

美术专业个人自我评价

2014/01/18 职场文书

找工作求职信

2014/07/07 职场文书

世界卫生日宣传活动总结

2015/02/09 职场文书

致运动员赞词

2015/07/22 职场文书

学生会任命书范本

2015/09/21 职场文书

基于Go语言构建RESTful API服务

2021/07/25 Golang

CSS 鼠标选中文字后改变背景色的实现代码

2023/05/21 HTML / CSS