vue父子组件传值记录

news2024/11/25 2:48:01

之前父子组件传值不太熟悉,组件间传值要么用vuex,要么用sessionStorage缓存,但是sessionStorage感觉用多了不太好,缓存太多容易混淆,vuex还是比较好用,,但是用的过程中好像有个问题,记不得了,下次遇到再说

这次写自己的网站项目时因为页面有很多表格,加上布局什么的基本差不多,所以就想用公共组件,有区别的地方就是用slot插槽

不知道咋说,懒得写案例了,直接拿我这个页面说一下:

首先我是先创建了一个叫totalTableSort.vue的文件,这个文件作为公共组件,也算是子组件,写后面引入时相同的地方

在父组件使用时直接import引入注册组件后使用即可

父组件向子组件传值

在父组件使用<TotalTableSort></TotalTableSort>时,上面写的:porpsPageTitle和后面其他的就是要从父组件传递向子组件的值,例如:porpsPageTitle就是我要传递的本页面的标题名

此时父组件传值就完成了,接下来在子组件使用

如下,props与data同级,在props里面直接写上即可,我这里是在data里面重新赋值了一下,使用时就是模板语法直接用data里的pageTitle即可,如果不进行重新赋值到data直接使用propsPageTitle也是可以的,因为props里的是传递下来的,不可以重新改变这个值,所以习惯重新在data里面写一下

<h3 class="pageTitle">{{ pageTitle }}</h3>

data() {
 return {pageTitle: this.propsPageTitle,};
},
props: {propsPageTitle: "", //页面标题
}, 

其他情况

大部分时候需要传递从其他地方请求来的数值,又因为这个传值时异步进行的,有时候数值还没请求到值就传过去了,如果在子页面的mounted里面给data里的变量赋值,例如我要写this.showDataList=this.porpsShowDataList,本意是想让传过来的“显示的列表”赋给子页面的showDataList,但是这时因为值还没有请求到,然后就给showDataList赋了个空值,导致数据请求来之后也不能重新给页面数据渲染上

有人可能说那直接拿propsShowDataList用不就行了,也不是不可以,但是如果需要更改showDataList的话就没有办法了,因为我这里是使用showDataList控制显示的数据,需要经常变化,所以自然是不行

解决办法: 这时可以使用vue里的watch进行监听propsShowDataList值的变化,因为vue是响应式的,在父组件请求数据完成后传递的请求的值就会跟着变化,此时坚挺到propsShowDataList的变化就可以给showDataList重新赋值渲染,如下,监听哪个值前面就写哪个值,newData是新监听到变化后得值,oldData是之前的值

watch: {propsShowDataList(newData, oldData) {console.log("监听显示列表", newData, oldData);this.showDataList = newData;},
}, 

子组件向父组件传值

2022/3/25用到子组件调父组件方法了,顺便来写一下

使用$emit调用父组件传参,可以在父组件直接使用

这里我有一个导入数据的按钮,是在标题头上,因为页面标题这个玩意我这里很多页面除了内容不一样,样式排版什么都一样,所以就写在子组件上了,数据就在父组件获取,然后使用上面的父组件向子组件传值获取,这个时候点击导入数据之后,把文件数据写入数据库需要再调用一次父组件的getData()方法

这里可以在写入成功后使用$emit去调用父组件方法,$emit后面有两个参数,第一个是随便取一个方法名,例如我这里写的是parGetData意为父组件得getData方法

然后在父组件用@绑定子组件调用的函数,使用@子组件方法名="要调用的方法",这样就可以在子组件调用父组件的方法

$emit的第二个参数是调用父组件方法时传入的值,这里将上面的改一下

调用时改成这样

绑定的不变依然是@parGetData="getData"

在父组件的getData()方法接收一个参数,我这里用val表示,然后打印一下val

完事子组件调用时,就会将后面写的要传入的参数传到父组件的getData去,在getData可以操作这个传来的值,这就是子组件向父组件传值

好像之前还看到过比较离谱的更深层的传值(祖父或者曾祖父级别的传值),回头遇到再写

最后

整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1969.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Shell之计算命令、流程控制、函数

文章目录&#x1f68f; Shell计算命令&#x1f680; Shell计算命令&#xff1a;expr命令详解&#x1f6ac; 求值表达式(整数 前面)&#x1f6ac; 字符串语法&#x1f6ac; 小结&#x1f684; Shell计算命令&#xff1a;(())命令详解&#x1f6ac; 小结&#x1f692; Shell计算命…

linux:2.3.4 查找/搜索命令(find+grep)+压缩/解压缩命令(gzipbzip2+tar+mv+mkdir)

2.3.4 查找/搜索命令 1. find 在 Windows 中搜索文件&#xff0c;一般查找文件需要传入两个条件&#xff1a;① 在哪些目录中查找&#xff1b; ② 查找的内容.。在 Linux 中&#xff0c;查找文件的也需要这两个条件&#xff0c;不同于 Windows 使用搜索框 查找&#xff0c;Li…

蓝桥杯单片机第九届省赛题详细讲解(电子钟)

看之前强烈建议先自己做一遍&#xff01;&#xff01;&#xff01;演示视频题目讲解完整程序main.conewire.honewire.cds1302.hds1302.c工程文件演示视频 题目讲解 首先还是一如既往从题目的程序框图准备起。 将ds18b20&#xff0c;独立按键&#xff0c;数码管显示&#xff0…

弹指间计算机协会 2021“千里码”程序设计竞赛 题面

A.Hello World! Description 为保证所有参赛人员在比赛中都能拿到分数&#xff0c;本题只考察c的输出。 算法比赛不仅考察思考问题的能力&#xff0c;也需要一定的细心程度。 直接输出" HelI0 Wor1d!&#xff01;" &#xff0c;您将获得此题的全部分数。 Input 本…

django基于python的旅游网站--python-计算机毕业设计

项目介绍 旅游网站系统的用户分管理员和用户两个角色的权限子模块。 管理员所能使用的功能主要有&#xff1a;首页、个人中心、用户管理、景点分类管理、景点信息管理、门票预订管理、酒店信息管理、客房信息管理、客房预订管理、美食信息管理、用户分享、系统管理等。 用户可…

[MySQL]变量

文章目录1. 变量1.1 系统变量1.1.1 系统变量分类1.1.2 查看系统变量查看所有系统变量查询部分系统变量查看指定系统变量1.1.3 修改系统变量方式一&#xff1a;修改配置文件方式二&#xff1a;使用 set 设置系统变量的值1.2 用户变量1.2.1 用户变量的分类1.2.2 会话用户变量变量…

Maven

Maven是专门用于管理和构建Java项目的工具&#xff0c;它的主要功能有&#xff1a; 提供了一套标准化的项目结构提供了一套标准化的构建流程&#xff08;编译&#xff0c;测试&#xff0c;打包&#xff0c;发布...&#xff09;提供了一套依赖管理机制标准化的项目结构 不同IDE之…

C++语法——详细剖析多态与虚函数

目录 一.虚函数与多态的概念与基本使用 &#xff08;一&#xff09;.概念 &#xff08;二&#xff09;.基本使用 二.虚函数的底层 三.特殊的虚函数&#xff08;协变&#xff09; 四.多态在多继承、菱形继承与菱形虚拟继承中的使用。 &#xff08;一&#xff09;.多继承 …

C语言分支与循环实战篇-猜数字小游戏/关机小程序

前言 &#x1f47b;作者&#xff1a;龟龟不断向前 &#x1f47b;简介&#xff1a;宁愿做一只不停跑的慢乌龟&#xff0c;也不想当一只三分钟热度的兔子。 &#x1f47b;专栏&#xff1a;C初阶知识点 &#x1f47b;工具分享&#xff1a; 刷题&#xff1a; 牛客网 leetcode笔记软…

大一学生HTML5期末大作业——基于HTML+CSS制作传统节日美食13页(美食网站设计与实现)

&#x1f380; 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

[LeetCode周赛复盘] 第 317 场周赛20221030

[LeetCode周赛复盘] 第 317 场周赛20221030 一、本周周赛总结二、 [Easy] 6220. 可被三整除的偶数的平均值1. 题目描述2. 思路分析3. 代码实现三、[Medium] 6221. 最流行的视频创作者1. 题目描述2. 思路分析3. 代码实现四、[Medium] 6222. 美丽整数的最小增量1. 题目描述2. 思路…

终极Hadoop大数据教程

终极Hadoop大数据教程 包含 MapReduce、HDFS、Spark、Flink、Hive、HBase、MongoDB、Cassandra、Kafka 等的数据工程和 Hadoop 教程&#xff01; 课程英文名&#xff1a;The Ultimate Hands-On Hadoop - Tame your Big Data! 此视频教程共17.0小时&#xff0c;中英双语字幕&…

1.3 信号处理函数,创建worker进程

文章目录1、信号处理函数2、创建worker线程3、sigsuspend函数说明4、write函数思考1、信号处理函数 1、初始化信号的函数&#xff0c;用于注册信号处理程序 2、信号处理函数 初始化信号函数&#xff0c;遍历结构体数组&#xff0c;然后给结构体数组中的每个成员注册信号处理函数…

python实现自动检测核酸用码记录 ---- 自动化办公小技巧(摸鱼利器)

自动检测核酸用码记录&#x1f947;预备知识✈️os库os.path.exists()os.mkdir()os.remove()os.listdir()&#x1f47d;Python 3 查看字符编码方法⏰python3获取当前系统时间&#x1f424;读取图片&#xff0c;保存到指定目录&#x1f47c;将数据保存到csv文件中&#x1f948;p…

使用html+css实现一个静态页面(含源码)

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 文章目录一、网页介绍一…

freeRTOS学习(三)

任务管理 任务功能&#xff1a;任务以C函数的形式实现。唯一特别的地方是它们的原型&#xff0c;它必须返回void并接受一个void指针形参。 void ATaskFunction(void *pvParameters);**每个任务本身都是一个小程序。它有一个入口点&#xff0c;通常在无限循环中永远运行&#…

回归测试选择用例,看这里就可以了。

介绍 在软件生命周期中&#xff0c;软件经常发生变化&#xff0c;软件开发人员任何代码改动都会有引入故障的风险&#xff09;。 为了消除或减小这种风险&#xff0c;在软件迭代开发模式下&#xff0c;回归测试扮演着重要的角色&#xff1a;它能够帮助测试人员验证新增的功能…

mac配置jdk环境变量

**下载完成后直接安装一路next直到完成。 查看JDK安装后的路径 在终端输入以下命令查看JDK地址** 按照以下命令的顺序来设置jdk环境变量 查看JDK地址 &#xff1a;/usr/libexec/java_home -V。 open -e .bash_profile打开文件 touch .bash_profile 创建文件 打开.bash_prof…

G2O (General Graph Optimization)入门及简单使用

g2o全称是General Graph Optimization&#xff0c;也就是图优化&#xff0c;我们在做SLAM后端或者更加常见的任何优化问题&#xff08;曲线拟合&#xff09;都可以使用G2O进行处理。 先放出本文的几个参考链接&#xff1a; 半闲居士&#xff08;高翔博士&#xff09; 非线性…

智能终端信息安全概念(一):开篇

最近屁事以及自己对于时间的把控太差了&#xff0c;还有就是一个师妹最近让辅导作业&#xff0c;很烦。 回归正轨&#xff0c;好好学习Linux驱动的方面。 在实际的Linux驱动中&#xff0c;Linux内核尽量做得更多&#xff0c;以便于底层的驱动可以做得更少。 而且&#xff0c…