对于组件通信的深刻理解

父组件传递数据给子组件

props传递数据

父组件在子组件的标签上写自定义的属性,属性值是自己的变量,当渲染到子组件时,执行props会找自定义属性,内存了变量的内存,可访问到,写props,会生成vue实例的时候,将props的变量赋给,值找变量内存存入变量.插值语句等可访问.父组件会变量存的值是地址,对象内变量的地址,因此当修改的时候,修改的是对象变量的值,以及当修改父组件,会对所有的渲染一遍.修改父组件会报错.

因此要单项传输,否则会搞不清楚了.

props的写法

props:[变量名,变量名]

props:{

        变量名必须的类型

}

当props是对象类型时,会将变量地址类型进行判断,是否符合,再生成变量.不符合会生成错误.

不符合的话都会手动跑出错误噢.当不是必填的,则没有传入则不生成该变量.

疑问一:当非必填的时候,会显示默认值还是没有改变量呢?

通过实验发现写了默认值,无论是否是必须的,即使不是必须的,有默认值也有这个变量.

emit函数

props传递的变量,子组件不得改变,但是可用父组件改动,来达到子组件改变,父组件改变,为父组件的vue文件内.

任何一个vue实例都可用绑定事件,在组件标签上写的事件和函数,会给实例绑定这个事件和函数,this.$emit(事件名,参数)会触发事件,且传递参数是第二个.之前写在标签上的事件,是给标签对象绑定事件,其实任何一个对象都可绑定任何事件.vue对象的触发可用用$emit函数.触发事件传递参数,达到改变父组件的参数.

非父子的通信

.事件总线

个人认为就是创一个vue实例对象,对象都可以绑定和触发事件,绑定A组件的函数,触发传递B组件的数据,达到组件AB能传递数据.但是不能像props一样,props是父子间的.

1)创建vue对象

2)A组件绑定事件

对象的$on绑定

3)B组件函数触发事件

这个

只是和$emit一样,但是props是只属于父子的传递数据.

这里触发就不涉及和props一样当父组件变量改变,子组件会跟着更新,但是传递参数是变量,也会.

非父子通信2

这个只对于长辈和晚辈关系的组件.爷爷组件和父亲组件,儿子组件和爷爷组件.

父组件是含子组件的渲染component的组件.

长辈组件vue实例时,参数有provide,调用函数,将返回值是对象.因为inject访问变量,,返回的必须是对象,provide函数返回值内变量的值,如果是对象,则是vue实例的地址,否则是变量的值.,当晚辈组件inject内写数组,会将这些变量存入到晚辈的vue实例上.存的时候,如果是基本则直接是值,如果是对象则是地址,其他的props将能访问地址的重新渲染.

v-model原理

上面两条是等价的,v-model本质上是v-bind:value/:checked,可以变量控制视图,@input发生这个事件,写函数,去改变变量,达到一个视图改变变量,函数自己创建或者是不写参数都会传参$event表示事件详情,$event.target触发事件的DOM对象.来达到取值,即使是radio,触发$event.target.checked来取值.用户可用通过鼠标切换的都有input事件,当发生切换则是input/输入.因此v-model底层是@input事件,因此只能用于特定的,但是自己写别的的click,也可达到双向绑定.

父子之间通信使用v-model

以上四步达到,父组件传递数据给子组件,且子组件修改,父组件的数据.以上可用用v-model

传递的是value这个变量,当input事件触发时,改变数据.但是这样就只能变量value,事件名是input.

对于组件是value.对于标签有些事件是没有,但是组件都有,只要可以有input事件就可以存在.

不过而言有了一个value变量,和事件触发传递参数的事件input.

sync修饰符

组件在v-bind:属性名.sync可用同时对该属性做事件,写事件,事件名是undate:属性名,内写了虚线下面的.将数据改变成$event,这个是参数,我们触发@update:visible,在组件上写@是绑定事件,不止是$on(事件名),$emit(事件名,参数)

sync修饰赋可以使得组件有双向更新的数据,这里和v-model一样,都是props的作用传递数据,不过可用自定义属性名,和事件名,达到了传递props数据.到子组件,以及触发事件.

ref和refs

在组件的标签上写ref属性,会在vue实例上的$refs对象存属性值的变量,属性值是DOM对象.因此我们寻找this.$ref只会是找我们内部的标签.给组件对象设置ref,存储组件对象,组件对象和实例对象不一样,组件对象含有导出的变量和方法的值.

component是组件对象,创建对应的组件对象.

$nextTick

vue实例的数据改变时,代码是异步的,不会阻塞下一行代码的进行,会将虚拟DOM更新,但是下一行代码访问则是真实DOM,因此访问不到的,以及这个异步更新的放到真实的是在微任务队列内,等这个代码执行完再放到真实DOM,进行渲染.,但是对于初次挂载不是异步的.

当涉及改变DOM对象,是为任务队列.

微任务队列内也是依次执行.

上一行更新数据,是放到虚拟的,下一行访问DOM,找不到噢.

vue实例的$nexttick,函数会将参数(函数),微任务队列,等执行完DOM更新之后立刻调用函数.

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

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

相关文章

python综合实战案例-数据分析

Python是进行数据分析的好工具,今天就是借助一个案例给大家进行数据分析讲解。 本例设计一个log.txt⽂件,该文件记录了某个项⽬中某个 api 的调⽤情况,采样时间为每分钟⼀次,包括调⽤次数、响应时间等信息,⼤约18万条数…

如何在 Django 中使用 pyecharts

为项目新建一个目录,将其命名为django_pyecharts_demo, 在终端中切换到这个目录,并创建一个虚拟环境。 python -m venv django_pyecharts激活虚拟环境 django_pyecharts\Scripts\activate要停止使用虚拟环境,可执行命令 deactivate创建并激…

【string】查找最长的公共子序列(substr()/find())

实现一个算法查找两个字符串最长的公共子字符串。子字符串的介绍如下: 子字符串是指字符串中任意个连续的字符组成的子序列 输出一行,为最长公共子序列。 分析:使用substr()与find()函数 if(str2.find(temp)!string…

【论文精读】MAE:Masked Autoencoders Are Scalable Vision Learners 带掩码的自动编码器是可扩展的视觉学习器

系列文章目录 【论文精读】Transformer:Attention Is All You Need 【论文精读】BERT:Pre-training of Deep Bidirectional Transformers for Language Understanding 【论文精读】VIT:vision transformer论文 文章目录 系列文章目录一、前言…

24. UE5 RPG制作属性面板(二)

在上一篇中,我们创建属性面板的大部分样式,这一篇里面接着制作。 在这一篇里我们需要有以下几个方面: 在界面增加一个属性按钮。属性按钮增加事件,点击时可以打开属性面板,属性面板打开时无法再次点击按钮。点击属性面…

01背包问题dp

01背包 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i件物品的体积是 vi,价值是 wi。 求解将哪些物品装入背包,可使这些物品的总体积不超过背包容量,且总价值最大。 输出最大价值。 输入格式 第一行两个整数,N…

手撕算法-无重复字符的最长子串

描述 分析 滑动窗口,记录窗口中的所有出现的字符,然后窗口左边界固定,右边界右滑,如果,窗口中不存在新的字符,则右滑成功,否则左边界右滑,直到窗口中不存在右边界的值。 描述感觉不…

优化大型语言模型表现的策略与方法

在人工智能的世界里,大型语言模型如同 GPT-4 这样的存在,已经成为了一个璀璨的明星。这些模型的强大之处在于它们能够处理各种语言任务,比如写作、翻译和提问等。但是,想要让这些模型发挥出最大的作用,我们需要掌握一些…

登山小分队(dfs,模拟)

原题链接: 题目描述 Foxity和他的好友们相约去爬山,但是他们每个人都来到了不同的山脚下。整个山的结构类似一棵 "树",有很多的观光节点通过一条条山道连接起来。 在图论中,树是一种无向图,其中任意两个顶…

Centos7 防火墙iptables?

Centos7 防火墙iptables? 文章目录 Centos7 防火墙iptables?1. 介绍2. firewalld 和 iptables区别3. 区域管理概念区域管理有如下几种不同的初始化区域: 4.iptables的配置1.简述2.基本原理3.iptables传输数据包的过程4. iptables规则表和链5.…

Flink CDC 1.18.1 Oracle 数据同步到postgresql

1、下载flink-1.18.1-bin-scala_2.12.tgz,linux通过: wget https://archive.apache.org/dist/flink/flink-1.18.1/flink-1.18.1-bin-scala_2.12.tgz 2、oracle11g客户端安装,下载: instantclient-basic-linux.x64-11.2.0.4.0.zi…

(65)整数的各位积和之差(66)统计一致字符串的数目

文章目录 1. 每日一言2. 题目(65)整数的各位积和之差3. 解题思路4. 代码5. 题目(66)统计一致字符串的数目6. 解题思路7. 代码8. 结语 1. 每日一言 无论你对此生的决定为何,一定要真诚地对待自己。 —《卧虎藏龙》- 2.…

结构体类型详细讲解(附带枚举,联合)

前言: 如果你还对结构体不是很了解,那么本篇文章将会从 为什么存在结构体,结构体的优点,结构体的定义,结构体的使用与结构体的大小依次介绍,同样会附带枚举与联合体 目录 为什么存在结构体: 结构…

【Linux 驱动基础】IMX6ULL LED基础驱动

本机使用的是正点原子的IMX6ULL开发板 # 前置知识 IMX6ULL GPIO控制框图: GPIO控制代码大概分为几个流程:开启时钟、设置IO复用、设置IO属性、配置IO方向、设置IO输出电平,下面以IMX6ULL为例, 1. 开启时钟 参考资料&#xff1a…

C 语言的关键字 static 和 C++ 的关键字 static 有什么区别 / C++中,a和a有什么区别?

一、C 语言的关键字 static 和 C 的关键字 static 有什么区别 C语言和C中的关键字static在用法和语义上有一些相似之处,但也存在一些细微的差别。 在C语言中,static关键字主要用于以下三个方面: 修饰全局变量或函数:使用static…

深入理解 Docker 镜像

1. Docker 镜像的底层原理 1.1 分层的镜像 以我们的pull 命令为例,在下载的过程中我们可以看到docker的镜像好像是一层一层的在下载。 1.2 UnionFS(联合文件系统) 联合文件系统是一种分层、轻量级并且高性能的文件系统,它支持对文件系统的修改作为一次…

自学python指导教程

要系统地自学Python,可以按照以下步骤进行: 学习基础知识: 从Python的基础语法开始学习,如变量、数据类型、运算符等。理解Python中的控制流程,如条件语句和循环结构。学习函数的定义和使用。了解Python中常用的数据结…

MPI4.1文档翻译(持续更新)

本博客参考官方文档进行介绍,全网仅此一家进行中文翻译,走过路过不要错过。 官方网址:https://www.mpi-forum.org/ 参考文档:https://www.mpi-forum.org/docs/mpi-4.1/mpi41-report.pdf 引用官方4.1文档方法: manu…

2024最新华为OD机试试题库全 -【局域网中的服务器个数】- C卷

1. 🌈题目详情 1.1 ⚠️题目 在一个机房中,服务器的位置标识在 n*m 的整数矩阵网格中,1 表示单元格上有服务器,0 表示没有。如果两台服务器位于同一行或者同一列中紧邻的位置,则认为它们之间可以组成一个局域网。 请你统计机房中最大的局域网包含的服务器个数。 1.2 …

linux下使用迅雷的完美办法(网络版免费),其他下载工具

迅雷有自家服务器的支持,因此,其他下载器,可能难以匹敌 ? linux下使用迅雷的完美办法(免费) https://blog.csdn.net/lqrensn/article/details/8853949 网络版 Linux下安装并使用迅雷 https://www.lxlin…