【VUE】个人记录:父子页面数据传递

1. 父传子

在父页面中,调用子页面的组件位置处,通过“:”进行参数传递

<child-component :childData="parentData"></child-component>

parentData对象,需要在父页面的data中进行初始化声明

在子页面中,需要在props中,承接该对象

props: {childData: {type: Array,default: () => [],},
}

然后在子页面中,可以通过this.childData使用父页面传递过来的数据
注意:在子页面中props中声明的对象,在data中不要重复声明了,否则就会报错,如果需要在组件内部使用或者修改父页面传值,应该在data中使用赋值,例如

 data() {return {myChildData:this.childData}}

2. 子传父

子页面没有办法直接给父页面的参数赋值,子页面向父页面传值的方式为调用父页面的函数,将需要传递的数据放到父页面函数的参数中
子页面添加方法:

methods: {//向父页面传数据 $emit向父页面传数据的方法childToFather: function() {const vm = this;vm.$emit('getChildData', this.data);},}

父页面添加方法:

methods: {//向父页面传数据 $emit向父页面传数据的方法getChildData: function(data) {this.fatherData = data//用子页面的数据,修改父页面的数据},}

3. A子传B子

假设父页面F有两个子页面的组件A和B,A和B之间需要相互传参,假设A要给B传递数据,那个区分两个过程,分别取名:AToF和FToB。
在这里插入图片描述
其中,AToF,使用子页面通过$emit方法,将A的值给父页面传递过去,然后在FToB的过程中,通过props属性中的对应值,将数据传给B页面。

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

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

相关文章

算法与算法分析

目录 一.前言 二.算法的特性和要求 三.分析算法--时间效率 四. 分析算法--空间效率 一.前言 算法就是对特定问题求解方法和步骤的一种描述&#xff0c;它是指令的有限序列。其中&#xff0c;每个指令表示一个或多个操作。总而言之&#xff0c;我们数据结构就是通过算法实现操…

全球CG盛事:世界3D渲染大赛震撼开幕!

在数字艺术的浪潮中&#xff0c;CG&#xff08;计算机图形学&#xff09;已经成为现代视觉艺术不可或缺的一部分。它不仅推动了电影、游戏和动画产业的发展&#xff0c;更激发了无数艺术家的创造力。今天&#xff0c;我们迎来了一个全球CG界的盛事——世界3D渲染大赛的震撼开幕…

【Unity2D 2022:UI】TextMeshPro组件无法显示中文

在Unity中创建了一个预制体Card&#xff0c;上面挂载了一些Text Mesh Pro组件用来显示卡牌信息。但是在输入文字后&#xff0c;发现无法显示中文&#xff1a; 解决方法如下&#xff1a; 一、导入字体文件&#xff08;ttf格式&#xff09;和常用字字集&#xff08;txt格式&…

【LLM大模型】LLaMA3微调部署真不难!拿走这份教程,轻松掌握LLaMA大模型微调!

今天给大家分享一个爆火的llama3教程&#xff0c;也就是下面这份&#xff1a; 这个项目是基于Meta最新发布的新一代开源大模型Llama-3开发的&#xff0c;是Chinese-LLaMA-Alpaca开源大模型相关系列项目的第三期。本项目开源了中文Llama-3基座模型和中文Llama-3-Instruct指令精…

使用curl测试websocket服务是否能正常连入

部分场景&#xff0c;前端连接不上websocket服务&#xff0c;需要从后台验证websocket服务是否能连入&#xff0c;判断防火墙是否开通&#xff0c;反向代理是否配置正确&#xff0c;可以使用curl测试服务器websocket服务是否正常。 分行命令 curl --include \--no-buffer \--…

自监督学习概述(Self-Supervised Learning,SSL)

自监督学习&#xff08;Self-Supervised Learning&#xff0c;SSL&#xff09;是一种机器学习方法&#xff0c;旨在利用未标记数据进行训练。这种方法通过从数据本身生成伪标签&#xff0c;来创建监督信号&#xff0c;使得模型能够学习有效的数据表示。自监督学习在深度学习领域…

Vue的安装配置

1.安装node js Node.js — 在任何地方运行 JavaScript (nodejs.org) 2.测试nodejs是否安装成功 node -v npm -v3.通过npm 安装 vue npm install -g vue/cli4.测试vue是否安装成功 vue --version5.打开PyCharm&#xff0c;创建项目&#xff1a;flask-web vue create flask…

论文快过(图像配准|Coarse_LoFTR_TRT)|适用于移动端的LoFTR算法的改进分析 1060显卡上45fps

项目地址&#xff1a;https://github.com/Kolkir/Coarse_LoFTR_TRT 创建时间&#xff1a;2022年 相关训练数据&#xff1a;BlendedMVS LoFTR [19]是一种有效的深度学习方法&#xff0c;可以在图像对上寻找合适的局部特征匹配。本文报道了该方法在低计算性能和有限内存条件下的…

【已解决】TypeError: argument of type ‘int’ is not iterable

【已解决】TypeError: argument of type ‘int’ is not iterable 在Python编程中&#xff0c;TypeError: argument of type int is not iterable是一个常见的错误。此错误表明你尝试对一个整数&#xff08;int&#xff09;执行迭代操作&#xff0c;但整数是不可迭代的。本文将…

微信小程序模拟扫码进入调试

1 2 参数就是namekeyaaa&#xff0c;上面的%3D是经过encodeURIComponent编码&#xff0c;必须使用%3D&#xff0c;不然等号会当作新的key。

【单片机毕业设计选题24081】-路灯无线数据采集器

系统功能: 手机开启2.4G WiFi热点后再给系统上电 系统操作说明&#xff1a; 上电后OLED显示 “欢迎使用智能路灯系统请稍后”&#xff0c;两秒后显示Connecting...表示 正在连接阿里云&#xff0c;正常连接阿里云后显示第一页面&#xff0c;如长时间显示Connecting...请 检…

Redis的操作以及SpringCache框架

目录 一.什么是Redis&#xff1f; 二.Redis的相关知识&#xff1a; 三.如何操作Redis&#xff1f; 1&#xff0c;常用命令&#xff1a; 2.Spring Data Redis &#xff08;1&#xff09; pom.xml 配置&#xff1a; &#xff08;2&#xff09;配置Redis数据源&#xff1a; …

转置卷积 transposed convolution

1. 转置卷积 转置卷积&#xff08;Transposed Convolution&#xff09;也叫Fractionally-strided Convolution和Deconvolution&#xff0c;但用的最多的是Transposed Convolution。 注意&#xff1a; 转置卷积不是卷积的逆运算&#xff0c;只会大小恢复为原本大小。转置卷积…

SPSS个人版是什么软件

SPSS是一款数据统计、分析软件&#xff0c;它由IBM公司出品&#xff0c;这款软件平台提供了文本分析、大量的机器学习算法、数据分析模型、高级统计分析功能等&#xff0c;软件易学且功能非常强大&#xff0c;可以使用SPSS制作图表&#xff0c;例如柱状、饼状、折线等图表&…

APP逆向 day21大姨妈逆向

一.前言 今天来和大家说一款app名叫DYM&#xff0c;我们选择版本v8.6.0&#xff0c;今天通过这个可以学到的知识点有绕过root检测&#xff0c;通过frida-rpc和自己编写一款小的app来调用so文件&#xff0c;然后再来破解登录接口 二.绕过root检测 我们进入app后发现&#xff…

C++从入门到起飞之——初始化列表类型转换static成员 全方位剖析!

&#x1f308;个人主页&#xff1a;秋风起&#xff0c;再归来~&#x1f525;系列专栏&#xff1a;C从入门到起飞 &#x1f516;克心守己&#xff0c;律己则安 目录 1、初始化列表 2、 类型转换 3. static成员 4、完结散花 1、初始化列表 • 之前我们实现构造函数…

Qwen2模型Text2SQL微调​以及GGUF量化

Qwen2-1.5B微调 准备python环境 conda create --name llama_factory python=3.11 conda activate llama_factory部署llama-factory git clone --depth 1 https://github.com/hiyouga/LLaMA-Factory.git cd LLaMA-Factory pip3 install -e ".[torch,metrics]" # 如…

算法日记day 20(二叉搜索树)

一、验证二叉搜索树 题目&#xff1a; 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左 子树 只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也…

IE11添加收藏、关闭窗口时弹出的对话框字体又大又粗很难看的解决办法

原因已查明&#xff0c;在win7 sp1 32位系统下&#xff0c;安装“2020-01 适用于基于 x86 的系统的 Windows 7 月度安全质量汇总&#xff08;KB4534310&#xff09;”这个更新会导致IE11的窗口字体变大变粗&#xff0c;把这个更新卸载了就可以了&#xff0c;无需重装IE11浏览器…

【四】jdk8基于m2芯片arm架构Ubuntu24虚拟机下载与安装

文章目录 1. 安装版本2. 开始安装3. 集群安装 1. 安装版本 如无特别说明&#xff0c;本文均在root权限下安装。进入oracle官网&#xff1a;https://www.oracle.com/java/technologies/downloads/找到最下面Java SE 看到java 8&#xff0c;下载使用 ARM64 Compressed Archive版…