编程 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的bind()方法使用详解

Jul 15 Javascript

JavaScript实现同一页面内两个表单互相传值的方法

Aug 12 Javascript

基于JavaScript创建动态Dom

Dec 08 Javascript

完美解决jQuery符号$与其他javascript 库、框架冲突的问题

Aug 09 Javascript

JS实现最简单的冒泡排序算法

Feb 15 Javascript

ionic2打包android时gradle无法下载的解决方法

Apr 05 Javascript

JavaScript中Require调用js的实例分享

Oct 27 Javascript

基于vue-simplemde实现图片拖拽、粘贴功能

Apr 12 Javascript

JS跨域请求的问题解析

Dec 03 Javascript

Vue实现购物车的全选、单选、显示商品价格代码实例

May 06 Javascript

ant-design-vue 实现表格内部字段验证功能

Dec 16 Javascript

JavaScript布尔运算符原理使用解析

May 06 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 htmlentities和htmlspecialchars 的区别

2008/08/18 PHP

PHP多线程类及用法实例

2014/12/03 PHP

WordPress中重置文章循环的rewind_posts()函数讲解

2016/01/11 PHP

PHP新特性之字节码缓存和内置服务器

2017/08/11 PHP

使Ext的Template可以解析二层的json数据的方法

2007/12/22 Javascript

jquery实现多级下拉菜单的实例代码

2013/10/02 Javascript

JS实现距离上次刷新已过多少秒示例

2014/05/23 Javascript

Jquery遍历Json数据的方法

2015/04/20 Javascript

JSON与XML优缺点对比分析

2015/07/17 Javascript

jquery实现简单的全选和反选功能

2016/01/02 Javascript

实例讲解jquery中mouseleave和mouseout的区别

2016/02/17 Javascript

KnockoutJS 3.X API 第四章之数据控制流component绑定

2016/10/10 Javascript

基于jQuery制作小图标上下滑动特效

2017/01/18 Javascript

微信小程序后台解密用户数据实例详解

2017/06/28 Javascript

浅谈ajax在jquery中的请求和servlet中的响应

2018/01/22 jQuery

vue项目中引入Sass实例方法

2019/08/27 Javascript

axios 实现post请求时把对象obj数据转为formdata

2019/10/31 Javascript

解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目

2020/02/09 Javascript

JavaScript使用canvas绘制随机验证码

2020/02/17 Javascript

Python文件和目录操作详解

2015/02/08 Python

python随机生成指定长度密码的方法

2015/04/04 Python

Python httplib模块使用实例

2015/04/11 Python

Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能

2018/01/11 Python

Python3多目标赋值及共享引用注意事项

2019/05/27 Python

python的faker库用法

2019/11/28 Python

了解一下python内建模块collections

2020/09/07 Python

暇步士官网：Hush Puppies

2016/09/22 全球购物

Blue Nile中国官网：全球知名的钻石和珠宝网络零售商

2020/03/22 全球购物

意大利和国际奢侈品牌购物网站：Suitnegozi.com

2021/01/15 全球购物

考核工作实施方案

2014/03/30 职场文书

在校大学生自我评价范文

2014/09/12 职场文书

学校领导班子四风问题整改意见

2014/10/02 职场文书

青涩记忆观后感

2015/06/18 职场文书

导游词之云南丽江古城

2019/09/17 职场文书

Vue-Element-Admin集成自己的接口实现登录跳转

2021/06/23 Vue.js

解决linux下redis数据库overcommit_memory问题

2022/02/24 Redis