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

news2024/9/23 9:36:20

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://www.coloradmin.cn/o/1950541.html

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

相关文章

深入探索PHP框架:Symfony框架全面解析

1. 引言 在现代Web开发领域&#xff0c;PHP作为一种广泛使用的服务器端脚本语言&#xff0c;其框架的选择对于项目的成功至关重要。PHP框架不仅能够提高开发效率&#xff0c;还能确保代码的质量和可维护性。本文将深入探讨Symfony框架&#xff0c;这是一个功能强大且灵活的PHP…

Java 序列流:Java 对象的序列化和反序列化详解

1.概念 序列化是指将一个对象转换为一个字节序列&#xff08;包含对象的数据、对象的类型和对象中存储的属性等信息&#xff09;&#xff0c;它可以将多个InputStream对象串联起来&#xff0c;使得它们可以被当作一个单一的输入流来处理&#xff0c;以便在网络上传输或保存到文…

【反证法】932. 漂亮数组

本文涉及知识点 分治 数学 反证法 LeetCode932. 漂亮数组 如果长度为 n 的数组 nums 满足下述条件&#xff0c;则认为该数组是一个 漂亮数组 &#xff1a; nums 是由范围 [1, n] 的整数组成的一个排列。 对于每个 0 < i < j < n &#xff0c;均不存在下标 k&#x…

ChatGPT的原理和成本

ChatGPT就是人机交互的一个底层系统&#xff0c;某种程度上可以类比于操作系统。在这个操作系统上&#xff0c;人与AI之间的交互用的是人的语言&#xff0c;不再是冷冰冰的机器语言&#xff0c;或者高级机器语言&#xff0c;当然&#xff0c;在未来的十来年内&#xff0c;机器语…

CSRF(Cross-site request forgery)

一、概述 1、CSRF定义 CSRF是一个web安全漏洞&#xff0c;该漏洞通过引诱用户来执行非预期的操作。该漏洞使得攻击者能够绕过同源策略&#xff0c;同源策略是一种用来阻止不同网站相互干扰的一种技术。 CSR跨站请求伪造&#xff0c;攻击者利用服务器对用户的信任&#xff0c…

MySQL练手 --- 1174. 即时食物配送 II

题目链接&#xff1a;1174. 即时食物配送 II 思路&#xff1a; 题目要求&#xff1a;即时订单在所有用户的首次订单中的比例。保留两位小数 其实也就是 即时订单 / 首次订单 所以&#xff0c;先求出首次订单&#xff0c;在首次订单的基础上寻找即时订单即可 解题过程&#x…

Mysql explain 优化解析

explain 解释 select_type 效率对比 MySQL 中 EXPLAIN 语句的 select_type 列描述了查询的类型,不同的 select_type 类型在效率上会有所差异。下面我们来比较一下各种 select_type 的效率: SIMPLE: 这是最简单的查询类型,表示查询不包含子查询或 UNION 操作。 这种查询通常是…

SpringCloud注册中心

SpringCloud注册中心 文章目录 SpringCloud注册中心1、注册中心原理2、Nacos注册中心2.1、部署nacos 3、服务注册4、服务发现 1、注册中心原理 在大型微服务项目中&#xff0c;服务提供者的数量会非常多&#xff0c;为了管理这些服务就引入了注册中心的概念。注册中心、服务提…

Redis实战篇(黑马点评)笔记总结

一、配置前后端项目的初始环境 前端&#xff1a; 对前端项目在cmd中进行start nginx.exe&#xff0c;端口号为8080 后端&#xff1a; 配置mysql数据库的url 和 redis 的url 和 导入数据库数据 二、登录校验 基于Session的实现登录&#xff08;不推荐&#xff09; &#xf…

微信小程序之接口测试

接口测试使用的方法及技术 测试接口文档 测试用例 用例执行&#xff1a;

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

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

学习记录——day20 IO

IO基础 1、IO&#xff1a;&#xff08;inout output&#xff09; 程序与外部设备进行信息交换的过程 2、IO的分类&#xff1a;标准IO和文件IO 1&#xff09;标准IO&#xff1a;调用封装好的相关库函数&#xff0c;来实现数据的输入输出 2&#xff09;文件IO&#xff1a; 3、…

vue3响应式用法(高阶性能优化)

文章目录 前言&#xff1a;一、 shallowRef()二、 triggerRef()三、 customRef()四、 shallowReactive()五、 toRaw()六、 markRaw()七、 shallowReadonly()小结&#xff1a; 前言&#xff1a; 翻别人代码时&#xff0c;总结发现极大部分使用vue3的人只会用ref和reactive处理响…

废品回收小程序制作,数字化带来的商业机会

随着社会环保意识的增强&#xff0c;废品回收成为了一个热门行业&#xff0c;它不仅能够减少资源浪费&#xff0c;还能够带来新的商业机会&#xff01; 当下&#xff0c;废品回收小程序已经成为了回收市场的重要方式&#xff0c;为回收行业的发展注入新鲜活力&#xff0c;推动…

如何使用C#快速创建定时任务

原文链接&#xff1a;https://www.cnblogs.com/zhaotianff/p/17511040.html 使用Windows的计划任务功能可以创建定时任务。 使用schtasks.exe可以对计划任务进行管理&#xff0c;而不需要编写额外代码 这里掌握schtasks /CREATE 的几个核心参数就可以快速创建计划任务 /SC …

【短视频批量剪辑系统源代码开发部署技术分享】

多视频一键剪辑&#xff0c;创意无限升级 在确保音视频同步的基础之上&#xff0c;可视化剪辑技术再次迎来重大升级。最新引入的“多脚本升多视频”功能&#xff0c;标志着可视化剪辑矩阵的全面进步&#xff0c;为内容创作带来了前所未有的便利和灵活性。 这一功能的引入使得一…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十五章 Pinctrl和GPIO子系统实验

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

超声波眼镜清洗机有必要买吗?不踩坑的超声波眼镜清洗机选购攻略

超声波眼镜清洗机有必要买吗&#xff1f;当然有必要啦&#xff01;眼镜戴久&#xff0c;镜片难免会脏&#xff0c;镜片看起来会越来越模糊&#xff0c;不仅会影响清晰度还会影响美观&#xff0c;如果是经常戴妆出门的女生&#xff0c;镜托位置污垢也会越来越脏&#xff0c;有些…

windows下运行sh文件

1、打开git bash 2、进入sh文件所在文件夹&#xff0c;使用sh xx.sh运行

Python爬虫掌握-----4实战(爬取视频)

我们使用爬虫时难免会遇到爬取视频的情况&#xff0c;其实爬取图片视频&#xff0c;内容都是一样的。这里以b站视频为例。 一、开始 1.找到url&#xff0c;请求url 防盗链&#xff0c;需要写在UA伪装中 正常的三步&#xff1a; 1.url 2.requests请求 3.UA伪装 import req…