编程 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的跨域传输数据(JSONP)

Mar 10 Javascript

js解析与序列化json数据(三)json的解析探讨

Feb 01 Javascript

Extjs 3.3切换tab隐藏相应工具栏出现空白解决

Apr 02 Javascript

Javascript 遮罩层和加载效果代码

Aug 01 Javascript

JavaScript初学者必看“new”

Jun 12 Javascript

微信小程序使用video组件播放视频功能示例【附源码下载】

Dec 08 Javascript

开发一个Parcel-vue脚手架工具(详细步骤)

Sep 22 Javascript

vue.js自定义组件directives的实例代码

Nov 09 Javascript

JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】

Dec 19 Javascript

javascript实现异形滚动轮播

Nov 28 Javascript

node使用mysql获取数据库数据中文乱码问题的解决

Dec 02 Javascript

JavaScript中的Proxy对象

Nov 27 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提示undefined index的几种解决方法

2012/05/21 PHP

php抓取页面的几种方法详解

2013/06/17 PHP

smarty模板中拼接字符串的方法

2014/02/14 PHP

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

2017/04/23 PHP

浅谈PHP封装CURL

2019/03/06 PHP

JS类定义原型方法的两种实现的区别评论很多

2007/09/12 Javascript

Javascript 篱式条件判断

2008/08/22 Javascript

asp.net HttpHandler实现图片防盗链

2009/11/09 Javascript

js不完美解决click和dblclick事件冲突问题

2012/07/16 Javascript

一个封装js代码-----展开收起效果示例

2013/07/03 Javascript

浅析js的模块化编写 require.js

2016/12/07 Javascript

微信小程序中显示html格式内容的方法

2017/04/25 Javascript

详解vue+vueRouter+webpack的简单实例

2017/06/17 Javascript

vue router下的html5 history在iis服务器上的设置方法

2017/10/18 Javascript

Angular之toDoList的实现代码示例

2017/12/02 Javascript

React router动态加载组件之适配器模式的应用详解

2018/09/12 Javascript

微信小程序用户登录和登录态维护的实现

2020/12/10 Javascript

新手该如何学python怎么学好python？

2008/10/07 Python

Python访问MySQL封装的常用类实例

2014/11/11 Python

一些Python中的二维数组的操作方法

2015/05/02 Python

Python实现递归遍历文件夹并删除文件

2016/04/18 Python

TensorFlow中权重的随机初始化的方法

2018/02/11 Python

Python如何处理大数据？3个技巧效率提升攻略（推荐）

2019/04/15 Python

Python3网络爬虫开发实战之极验滑动验证码的识别

2019/08/02 Python

python微信公众号开发简单流程实现

2020/03/09 Python

如何基于python对接钉钉并获取access_token

2020/04/21 Python

法国体育用品商店：GO Sport

2019/10/23 全球购物

中专毕业自我鉴定

2013/10/16 职场文书

学前班学生评语

2014/12/29 职场文书

长城的导游词

2015/01/30 职场文书

留学推荐信英文范文

2015/03/26 职场文书

2015年学校工作总结范文

2015/04/20 职场文书

史上最牛辞职信

2015/05/13 职场文书

2016年秋季运动会广播稿

2015/12/21 职场文书

golang日志包logger的用法详解

2021/05/05 Golang

Redis如何实现验证码发送以及限制每日发送次数

2022/04/18 Redis