Vue实现兄弟组件间的联动效果
作者:刘桐ssss 发布时间:2024-05-10 14:19:32
标签:vue,组件,联动,兄弟组件
目录
需求说明
Do it
需求说明
如图,我想要实现当点击字母L,页面定位到L开头的城市名
Do it
1.找到字母表的页面
在html标签绑定一个click事件,在js中定义一个方法,并使用参数e获取点击的字母。当在页面点击时,console出来
效果如下
2.通过city这个父页面,进行列表页和字母表页面的值传递
<1>在字母表页定义一个监听方法
<2>进入city页面,在html中绑定一个监听事件
在js中编写这个事件的方法
打开页面,可以看到没有问题,city页面监听到了字母表页面的点击
<3>city父页面把字母表页面的请求转发给list页面
首先我们要在city页面定义一个letter变量,然后在方法中定义用这个变量接受letter
然后还是city页面,我们要在html中绑定这个变量
3.子组件获取父组件传递过来的值
父组件传递过来了一个letter之后,子组件就要接受这个letter。
首先在list页面中先定义letter,然后利用 * ,一旦letter变化,只要letter不是空,那么就让滚动条滚动到这个元素的起始位置
最后记得在城市列表区域内注册一个引用信息:ref=key,用来监听你选中的key值
保存后,实现了联动效果。
总结
以上所述是小编给大家介绍的Vue实现兄弟组件间的联动效果网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://blog.csdn.net/Delicious_Life/article/details/104027405


猜你喜欢
- 异常值异常值是指样本中的个别值,其数值明显偏离其余的观测值。异常值也称离群点,异常值的分析也称为离群点的分析。常用的异常值分析方法为3&am
- 1、使用mysqli扩展库 预处理技术 mysqli stmt 向数据库添加3个用户<?php /
- 主键索引排序失效环境:MySQL8有一张用户信息表user_info,建表DDL如下:CREATE TABLE `user_info` (
- 本文实例讲述了Python有序字典简单实现方法。分享给大家供大家参考,具体如下:代码:# -*- coding: UTF-8 -*-impo
- python路径拼接使用:os.path.join()函数:连接两个或更多的路径名组件如果有一个组件是一个绝对路径,则在它之前的所有组件均会
- 引言python编程时,一部分人习惯将实现同一个功能的代码放在同一个文件;使用这些代码只需要import就可以了;下面看一个例子。testM
- 我就废话不多说了,大家还是直接看代码吧~#编写程序将列表中的偶数变成他的平方def word_len(s): # s = [i
- 导入pandas模块:import pandas as pd使用import读入pandas模块,并且为了方便使用其缩写pd指代。读入待处理
- 一、需求说明能够根据模板批量生成docx文档。具体而言,读取excel中的数据,然后使用python批量生成docx文档。二、实验准备准备e
- 1、字典的概念Python中的字典数据类型和现实中的字典很像,它是以键值对(键和值的组合)的方式把数据组织到一起,可以通过键找到与之对应的值
- 我们大致会在下列几种情况下用到: 一、文件操作(FileSystemObject)<%@ IMPORT
- 一. 背景公司又要做一个新项目,是一个合作型项目,我们公司出web展示服务,合作伙伴线下提供展示数据。而且本次项目是数据统计展示为主要功能,
- 本文实例讲述了python flask框架实现重定向功能。分享给大家供大家参考,具体如下:flask 重定向:from flask impo
- 本文实例讲述了php设计模式之装饰模式。分享给大家供大家参考,具体如下:介绍装饰者模式(Decorator Pattern)允许你向一个现有
- 如何在PYTHON里运用私有属性和方法class File:def __init__(self, name):self.name = nam
- ——nodejs安装及环境配置1.nodejs官网,下载windows平台nodejs环境安装包(.msi格式),安装2.测试安装是否成功:
- 1) 知识准备:为了使用Perl语言去存取mSQL和MySQL数据库的内容,必须安装一些API模块,以下列出一些必须安装的模块名称说明和其下
- 通过本接口可以查询圆通快递、申通快递、ems快递、韵达快递等快递单号查询信息,无需其他额外开发,非常方便首先到www.aikuaidi.cn
- 1、开启Mysql慢查询1.1、查看慢查询相关配置show variables like 'slow_query_log%'
- 特别是linux系统,装了多个python,有时候找不到python的绝对路径,有时候装了个django,又找不到django安装到哪里了。