2023/3/6 VUE - 组件传值【通信】方式

news/2024/5/3 22:44:38/文章来源:https://blog.csdn.net/zs18753479279/article/details/129347625

1 父亲传子代传值【子代使用父代的数据】

1.1 props传值

父亲给儿子传值:
在这里插入图片描述
爷爷给孙子传值:
在这里插入图片描述
这个props传值的方式,只能一代一代的往下传,不能跨代传值。

有一个问题:子组件不能修改父组件的值:
在这里插入图片描述
在这里插入图片描述

1.2 子组件直接使用父组件的 this.$parent

子组件通过:this.$parent.XXX使用父组件的数据;这种方式子组件可以直接修改父组件的数据。
在这里插入图片描述

1.2 依赖注入的方式【父亲传递给子代】 - provide inject

父组件可以直接传递给子代,不用一级一级的传递。
在这里插入图片描述
在这里插入图片描述
缺点就是 数据不知道从哪个父代而来。

2 后代给父亲传值

2.1 子组件自定义事件 this.$emit

在这里插入图片描述
在这里插入图片描述
父亲可以修改子代穿过来的值吗?【可以修改穿过来的值,但是这种修改不会影响到子组件的值】
在这里插入图片描述

2.2 父组件直接使用子组件的值

在这里插入图片描述
父组件可以直接修改子组件的值:
在这里插入图片描述
在这里插入图片描述

3 兄弟之间的传值

3.1 通过bus全局事件总线 - 任意组件间通信

在这里插入图片描述
这个X需要所有的vc的可见 - 我们在Vue的原型对象上放即可,这里给出一个概念的问题:关于VueComponent:

在这里插入图片描述

1.School组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,Vue.extend生成的。2、我们只需要写`<school/>``<school></school>`,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)3、特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent !!!!4、关于this指向:
(1) 组件配置中:
data函数、methods中的函数、watch中的函数、computed中的函数、它们的this均是【vuecomponent实例对象】
(2) new Vue(options)配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。5.VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象);Vue的实例对象,以后简称vm。

$on $off $emit 都可以使用 备注:$on $off $emit 都在Vue的原型对象中
Vue原型对象的属性都是给vm vc使用的 !!!!!!

实现方式一:
在这里插入图片描述
实现方式二:
在这里插入图片描述
在这里插入图片描述

4 子组件如何直接修改父组件的值

子组件可以使用this.$parent.XXX来修改父组件的值

5 父组件如何直接修改子组件的值

this.$children[0].sonTitle = ‘this is son data update for parent’
在这里插入图片描述

<Son ref="child"/>this.$refs.child.sonTitle = 'this is son data update for parent'
this.sonTitle = this.$refs.child.sonTitle

在这里插入图片描述

6 如何找到父组件

this.$parent

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RemotePotato0域内权限提升

CSDN 自动老文章博客迁移利用条件具有Domain Administrator特权的用户实际上已登录到主机或通过远程桌面登录攻击者已获得对主机的初始访问权限&#xff0c;或者已通过WinRM或SSH访问 &#xff08;具备本地管理组权限&#xff01;&#xff01;&#xff01;&#xff09;LDAP和SM…

【springmvc】获取请求参数

SpringMVC获取请求参数 1、通过ServletAPI获取 将HttpServletRequest作为控制器方法的形参&#xff0c;此时HttpServletRequest类型的参数表示封装了当前请求的请求报文的对象 RequestMapping("/testParam") public String testParam(HttpServletRequest request)…

emac接口与phy交互

nuc970的emac接口 nuc970的EMAC以太网接口与PHY芯片之间的数据交换是通过MII&#xff08;Media Independent Interface&#xff09;或RMII&#xff08;Reduced Media Independent Interface&#xff09;接口实现的。 在MII接口中&#xff0c;EMAC和PHY之间通过4对数据线&…

解决IDEA内存占比过高问题

问题描述 idea内存占比过高&#xff0c;调整GC算法运行配置 解决方案&#xff1a; 打开idea >帮助>编辑自定义VM选项>将下面的配置复制进去 -Xms2048m -Xmx4096m -Xverify:none -XX:DisableExplicitGC -XX:ReservedCodeCacheSize720m -XX:SoftRefLRUPolicyMSPerMB50…

IM即时通讯开发之常用加解密算法与通讯安全讲解

平时开发工作中&#xff0c;我们会经常接触加密、解密的技术。尤其在今天移动互联网时代&#xff0c;越来越多的用户会将数据存储在云端&#xff0c;或使用在线的服务处理信息。这些数据有些涉及用户的隐私&#xff0c;有些涉及用户的财产&#xff0c;要是没有一套的方案来解决…

机器学习100天(四十):040 线性支持向量机-公式推导

《机器学习100天》完整目录:目录 机器学习 100 天,今天讲的是:线性支持向量机-公式推导! 首先来看这样一个问题,在二维平面上需要找到一条直线划分正类和负类。 我们找到了 A、B、C 三条直线。这三条直线都能正确分类所有训练样本。但是,哪条直线最好呢?直观上来看,我…

$3 : 水​​​​​项目实战 - 水果库存系统

javase知识点复习&#xff1a; final关键字&#xff1a;http://t.csdn.cn/bvFgu 接口的定义&#xff0c;特性&#xff0c;实现&#xff0c;继承&#xff1a;http://t.csdn.cn/tbXl3 异常&#xff1a;http://t.csdn.cn/VlS0Z DAO的概念和角色&#xff08;设计理念&#xff09;&a…

反思当下所处的环境,有没有让你停滞不前、随波逐流

环境对人的影响真的很大&#xff0c;小时候的环境、长大后的环境、工作环境、生活环境、好的环境、差的环境......我们都生活在一定的环境中所以既是环境的产物&#xff0c;又是环境的创造者与改造者。我们与环境的关系是相辅相成的我们的生活和工作当中接触到的人或事或物&…

【JavaScript速成之路】JavaScript数组

&#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f525;系列专栏&#xff1a;【JavaScript速成之路】 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文章目录前言1&#xff0c;初识数组1.1&#xff0c;数组1.2&#xff0c;创建数组1.3&…

Elasticsearch:使用 Logstash 构建从 Kafka 到 Elasticsearch 的管道 - Nodejs

在我之前的文章 “Elastic&#xff1a;使用 Kafka 部署 Elastic Stack”&#xff0c;我构建了从 Beats > Kafka > Logstash > Elasticsearch 的管道。在今天的文章中&#xff0c;我将描述从 Nodejs > Kafka > Logstash > Elasticsearch 这样的一个数据流。在…

【C#进阶】C# 特性

序号系列文章10【C#基础】C# 正则表达式11【C#基础】C# 预处理器指令12【C#基础】C# 文件与IO文章目录前言1&#xff0c;特性的概念1.1 特性的属性1.2 特性的用途2&#xff0c;特性的定义2.1 特性参数2.2 特性目标3&#xff0c;预定义特性3.1 AttributeUsage3.2 Conditional3.2…

2023年再不会Redis,就要被淘汰了

目录专栏导读一、同样是缓存&#xff0c;用map不行吗&#xff1f;二、Redis为什么是单线程的&#xff1f;三、Redis真的是单线程的吗&#xff1f;四、Redis优缺点1、优点2、缺点五、Redis常见业务场景六、Redis常见数据类型1、String2、List3、Hash4、Set5、Zset6、BitMap7、Bi…

2023款欧拉好猫上市,12.98万起

上周&#xff0c;2023款欧拉好猫焕新上市。2023款好猫共推出5个车型&#xff1a; •401km标续航&#xff0c;舒享型/豪华型/尊贵型&#xff0c;分别是12.98/13.98/14.98万元&#xff1b; •501km长续航&#xff0c;豪华型/尊贵型&#xff0c;分别是15.58/16.58万元&#xff1b;…

QT的下载与安装

下载安装工具 https://download.qt.io/official_releases/online_installers/ 双击打开安装包 一步一步安装 选择需要的包&#xff0c;没想好的话QT装好了也可以重新使用安装程序添加 然后就装好了

SAP UI5 Upload/Download file through NetWeaver Gateway

1、创建 SEGW对象 2、创建Entity Type 要把Media 标识打上 3、 激活对象然后到DPC Class的扩展对象里面重定义 /IWBEP/IF_MGW_APPL_SRV_RUNTIME~GET_STREAM /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CREATE_STREAM /IWBEP/IF_MGW_APPL_SRV_RUNTIME~UPDATE_STREAM METHOD /iwbep/if_m…

1497. 树的遍历

文章目录1.二叉树的遍历2.二叉树的构造3.例题二叉树的构造&#xff1a;没有中序遍历则无法唯一构造1.二叉树的遍历 2.二叉树的构造 3.例题 一个二叉树&#xff0c;树中每个节点的权值互不相同。 现在给出它的后序遍历和中序遍历&#xff0c;请你输出它的层序遍历。 输入格式…

5.深入理解HttpSecurity的设计

深入理解HttpSecurity的设计 一、HttpSecurity的应用 在前章节的介绍中我们讲解了基于配置文件的使用方式&#xff0c;也就是如下的使用。 也就是在配置文件中通过 security:http 等标签来定义了认证需要的相关信息&#xff0c;但是在SpringBoot项目中&#xff0c;我们慢慢脱离…

ubuntu20修改网卡静态ip或者动态ip

1、查看所有网卡信息 ifconfig -a 2、修改信息 sudo gedit /etc/netplan/01-network-manager-all.yaml # Let NetworkManager manage all devices on this system network:ethernets:ens33: #配置的网卡的名称dhcp4: trueens38:dhcp4: trueversion: 2renderer: networkd…

用Python按时间分割txt文件中的数据

案例 有一个监测系统,每隔两分钟就会记录一下监测结果,如下图所示:现在要求按小时将数据提取,并存为新的txt文件,也就是1天会对应有24个txt文件。先整理一下思路: 读取数据将每行数据的时间戳转换成“日期-小时”格式,并按此分类数据,存入字典 按“日期-小时”分断,将…

没有钱怎么创业?一分钱没有如何能创业成功?

限制人创业成功的从来都不是资金&#xff0c;而是能力&#xff0c;这个道理很多人都可能不懂&#xff0c;多数人习惯了庸庸碌碌、日复一日地打工行为&#xff0c;却不知如何创业&#xff0c;那么&#xff0c;没有钱怎么创业&#xff1f;一分钱没有如何能创业成功呢&#xff1f;…