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

news2024/11/13 7:52:05

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.coloradmin.cn/o/391910.html

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

相关文章

MyBatis学习笔记(十) —— 动态SQL

10、动态SQL MyBatis框架的动态SQL技术是一种根据特定条件动态拼装SQL语句的功能&#xff0c;它存在的意义是为了解决拼接SQL语句字符串的痛点问题。 动态SQL&#xff1a; 1、if 标签&#xff1a;通过test属性中的表达式判断标签中的内容是否有效&#xff08;是否会拼接到sql中…

RTOS中相对延时和绝对延时的区别

相信许多朋友都有过这么一个需求&#xff1a;固定一个时间&#xff08;周期&#xff09;去处理某一件事情。 比如&#xff1a;固定间隔10ms去采集传感器的数据&#xff0c;然后通过一种算法计算出一个结果&#xff0c;最后通过指令发送出去。 你会通过什么方式解决呢&#xf…

Redis缓存击穿,缓存穿透,缓存雪崩,附解决方案

前言在日常的项目中&#xff0c;缓存的使用场景是比较多的。缓存是分布式系统中的重要组件&#xff0c;主要解决在高并发、大数据场景下&#xff0c;热点数据访问的性能问题&#xff0c;提高性能的数据快速访问。本文以Redis作为缓存时&#xff0c;针对常见的缓存击穿、缓存穿透…

Java中 new Integer 与 Integer.valueOf 的区别

引入&#xff1a;new Integer(18) 与 Integer.valueOf(18) 有区别吗&#xff1f;有的话&#xff0c;有什么区别&#xff1f; 我们都知道&#xff0c;使用 new 关键字的时候&#xff0c;每次都会新创建一个对象。但是&#xff0c;Integer.valueOf() 会新创建一个对象吗&#xf…

Linux环境下实现并详细分析c/cpp线程池(附源码)

一、线程池原理 如果并发的线程数量很多&#xff0c;并且每个线程都是执行一个时间很短的任务就结束了&#xff0c;这样频繁创建线程就会大大降低系统的效率&#xff0c;因为频繁创建线程和销毁线程需要时间。 线程池是一种多线程处理形式&#xff0c;处理过程中将任务添加到…

Unity Animator.Play(stateName, layer, normalizedTime) 播放动画函数用法

原理 接口&#xff1a; public void Play(string stateName, int layer -1, float normalizedTime float.NegativeInfinity);参数含义stateName动画状态机的某个状态名字layer第几层的动画状态机&#xff0c;-1 表示播放第一个状态或者第一个哈希到的状态normalizedTime从s…

spring security 实现自定义认证和登录(4):使用token进行验证

前面我们实现了给客户端下发token&#xff0c;虽然客户端拿到了token&#xff0c;但我们还没处理客户端下一次携带token请求时如何验证&#xff0c;我们想要实现拿得到token之后&#xff0c;只需要验证token&#xff0c;不需要用户再携带用户名和密码了。 1. 禁用 UsernamePass…

崭新的centos虚拟机不能上网

原因 先说点简单的&#xff1a; 没启用虚拟机容器的网络选项虚拟机的网卡没启用手动设置了网关、掩码、dns等没设置对DHCP没开 做法 没启用虚拟机容器的网络选项 在virtualbox里面&#xff0c;开启虚拟机后右下角有个网络选项这里亮着就说明开了&#xff0c;没亮就右键打开…

BufferQueue研究

我们在工作的过程中&#xff0c;肯定听过分析卡顿或者冻屏问题的时候&#xff0c;定位到APP卡在dequeueBuffer方法里面&#xff0c;或者也听身边的同事老说3Buffer等信息。所以3Buffer是什么鬼&#xff1f;什么是BufferQueue?搞Android&#xff0c;你一定知道Graphic Buffer和…

理解js的精度问题

参考博客&#xff1a;js精度丢失问题-看这篇文章就够了(通俗易懂)、探寻 JavaScript 精度问题以及解决方案、JavaScript 浮点数陷阱及解法 1 为什么 JavaScript 中所有数字包括整数和小数都只有一种类型 即 Number类型&#xff0c;它的实现遵循 IEEE 754 标准。 符号位S&#…

MySQL运维篇之Mycat分片规则

3.5.3、Mycat分片规则 3.5.3.1、范围分片 根据指定的字段及其配置的范围与数据节点的对应情况&#xff0c;来决定该数据属于哪一个分片。 示例&#xff1a; 可以通过修改autopartition-long.txt自定义分片范围。 注意&#xff1a; 范围分片针对于数字类型的字段&#xff0c;…

Kubernetes Pod 水平自动伸缩(HPA)

Pod 自动扩缩容 之前提到过通过手工执行kubectl scale命令和在Dashboard上操作可以实现Pod的扩缩容&#xff0c;但是这样毕竟需要每次去手工操作一次&#xff0c;而且指不定什么时候业务请求量就很大了&#xff0c;所以如果不能做到自动化的去扩缩容的话&#xff0c;这也是一个…

IO文件操作

认识文件 狭义的文件 存储在硬盘上的数据,以“文件"为单位,进行组织 常见的就是普通的文件 (文本文件,图片, office系列,视频,音频可执行程序…)文件夹也叫做"目录" 也是一种特殊的文件。 广义的文件 操作系统,是要负责管理软硬件资源&#xff0c;操作系统(…

更高效的跨端开发选择:基于小程序容器的Flutter应用开发

为什么说Flutter是一个强大的跨端框架&#xff1f; Flutter是一个基于Dart编程语言的移动应用程序开发框架&#xff0c;由Google开发。它的强大之处在于它可以快速构建高性能、美观、灵活的跨平台应用程序&#xff0c;适用于Android、iOS、Web、Windows、macOS和Linux等多个平…

Git图解-常用命令操作

目录 一、前言 二、初始化仓库 三、添加文件 四、Git 流程全景图 五、Git工作流程 六、工作区和暂存区 七、查看文件状态 八、查看提交日志 九、查看差异 十、版本回退 十一、管理修改 十二、修改撤销 十三、删除文件 十四、分支管理 十五、项目分支操作 十六、…

Centos7使用OVS桥的方式创建KVM虚拟机

一、OVS使用 1、OVS编译安装 下载ovs2.17版本源码 http://www.openvswitch.org//download/ ./boot.sh ./configure make && make install2、启动OVS服务 &#xff08;1&#xff09;创建文件/etc/systemd/system/openvswitch.service [rootlocalhost qemu]# syste…

Spring Cloud Alibaba全家桶(五)——微服务组件Nacos配置中心

前言 本文小新为大家带来 微服务组件Nacos配置中心 相关知识&#xff0c;具体内容包括Nacos Config快速开始指引&#xff0c;搭建nacos-config服务&#xff0c;Config相关配置&#xff0c;配置的优先级&#xff0c;RefreshScope注解等进行详尽介绍~ 不积跬步&#xff0c;无以至…

【面试题】如何避免使用过多的 if else?

大厂面试题分享 面试题库前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★地址&#xff1a;前端面试题库一、引言相信大家听说过回调地狱——回调函数层层嵌套&#xff0c;极大降低代码可读性。其实&#xff0c;if-else层层嵌套&#xff0c;如下图…

.NET 8 预览版 1 发布!

.NET 8 是一个长期支持(LTS) 版本。这篇文章涵盖了推动增强功能优先级排序和选择开发的主要主题和目标。.NET 8 预览版和发布候选版本将每月交付一次。像往常一样&#xff0c;最终版本将在 11 月的某个时候在 .NET Conf 上发布。 .NET 版本包括产品、库、运行时和工具&#xf…

JavaSE学习笔记总结day19

今日内容 二、线程安全的集合 三、死锁 四、线程通信 五、生产者消费者 六、线程池 零、 复习昨日 创建线程的几种方式 1) 继承 2) 实现Runnable 3) callable接口 Future接口 4) 线程池 启动线程的方法 start() 线程的几种状态 什么是线程不安全 setName getName Thread.curr…