第二十节:带你梳理Vue2:Vue子组件向父组件传参(事件传参)

1. 自定义事件

除了可以处理原生的DOM事件, v-on指令也可以处理组件内部触发的自定义的事件,调用this.$emit()函数就可以触发一个自定义事件

$emit() 触发事件函数接受一个自定义事件的事件名以及其他任何给事件函数传递的参数. 然后就可以在组件上使用v-on来绑定这个自定义事件

{methods: {handleClick(){this.clicks++this.$emit("count",this.clicks )}}
}

所以我们就可以利用自定事件来处理子组件触发父组件数据的更改和向父组件传值


2. 子组件触发父组件数据的改变

通过父组件向子组件传值的学习,我们已经知道了Vue是单向下行数据流, 子组件更改props中的数据不会触发父组件数据的改变, 但是由于响应式原理,父组件数据的改变会导致子组件props中值的改变

那么我们怎样才能在子组件中改变显示的结果呢.

思路:

  1. 子组件中没法更改父组件中的数据,那么我们就让父组件自己的函数改自己的数据
  2. 如何在子组件中触发父组件中的函数呢, 就可以通过自定义事件
  3. 子组件在函数中触发自定义事件, 将父组件中更改数据的函数绑定为自定义事件的函数
  4. 然后父组件中的数据一变,因为响应式,所以子组件中的数据会自动改变

示例代码如下:

<div id="app"><!-- 使用组件 --><!-- 3.在子组件中绑定自定义事件, 将父组件的方法绑定为自定义事件的处理函数--><my-component :clicks="clicks" @count="handleParentClick"></my-component></div><!-- 组件模板 -->
<template id="MyComponent"><div>被点击了{{clicks}}次<!-- 1. 子组件通过原生click事件触发子组件自己的函数 --><button @click="handleClick">点击</button></div>
</template><script>//  组件选项对象let MyComponent = {props:["clicks"],template: `#MyComponent`,methods:{handleClick(){// 2.子组件函数中触发自定义事件this.$emit("count")}}}//  实例中注册组件const vm = new Vue({el:"#app",data: {clicks:0},components: {"MyComponent": MyComponent},methods:{handleParentClick(){// 4. 在父组件函数中修改父组件中的数据this.clicks++}}})
</script>

示例结果

子组件通过自定义事件改变父组件数据.png

最后父组件数据一变,子组件显示结果自然变化

我们也知道$emit方法在触发自定义事件的时候,还可以给自定义事件传参, 这样就可以实现子组件向父组件传参


3. 子组件向父组件传参

上一小节,我们是在子组件中通过自定义事件触发父组件中的函数, 在父组件中修改数据,

同样我们也可以在子组件中修改数据,然后将修改后的数据通过自定义事件传参的方式,传递给父组件函数,在父组件函数中直接用子组件传过来修改后的数据直接替换父组件中的数据

示例代码如下:

<div id="app"><!-- 使用组件 --><!-- 3.在子组件中绑定自定义事件, 将父组件的方法绑定为自定义事件的处理函数--><my-component :clicks="clicks" @count="handleParentClick"></my-component>
</div><!-- 组件模板 -->
<template id="MyComponent"><div>被点击了{{clicks}}次<!-- 1. 子组件通过原生click事件触发子组件自己的函数 --><button @click="handleClick">点击</button></div>
</template><script>//  组件选项对象let MyComponent = {props:["clicks"],template: `#MyComponent`,data(){return {count: this.clicks}},methods:{handleClick(){// 2.子子组件函数中触发自定义事件// 2.1 在触发自定义事件的时候向自定事件传参this.count+=2this.$emit("count",this.count)}}}//  实例中注册组件const vm = new Vue({el:"#app",data: {clicks:0},components: {"MyComponent": MyComponent},methods:{handleParentClick(count){// 4. 在父组件函数中修改父组件中的数据// 4.1 接受自定义事件触发时传递的参数console.log(count)this.clicks = count}}})</script>

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

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

相关文章

启动游戏出现concrt140.dll错误的解决方法

concrt140.dll是一个动态链接库文件&#xff0c;属于Microsoft Visual C 2015 Redistributable组件集的一部分。这个文件是并发运行时库&#xff08;Concurrency Runtime&#xff09;的一部分&#xff0c;对于支持和增强应用程序的多线程与并发执行能力至关重要。它包含了实现并…

基于Python+Flask框架实现的新冠疫情可视化的设计与实现

基于PythonFlask框架实现的新冠疫情可视化的设计与实现 “Design and Implementation of COVID-19 Visualization using Python Flask Framework” 完整下载链接:基于PythonFlask框架实现的新冠疫情可视化的设计与实现 文章目录 基于PythonFlask框架实现的新冠疫情可视化的设…

Python:处理矩阵之NumPy库(中)

目录 前言 1.onse函数 2.diag函数 3.random函数 4.rand函数 5.randn函数 6.randint函数 7.shape函数 8.reshape函数 9.resize函数 10.flatten函数 11.hstack函数 12.vstack函数 前言 本文章是续《Python&#xff1a;处理矩阵之NumPy库&#xff08;上&#xff09;》的第二篇文章…

Java实现简单词法、语法分析器

1、词法分析器实现 词法分析器是编译器中的一个关键组件&#xff0c;用于将源代码解析成词法单元。 词法分析器的结构与组件&#xff1a; 通常&#xff0c;词法分析器由两个主要组件构成&#xff1a;扫描器&#xff08;Scanner&#xff09;和记号流&#xff08;Token Stream&a…

003-两台交换机堆叠(IRF)

两台交换机堆叠&#xff08;IRF&#xff09; 概念 IRF (Intelligent Resilient Framework) 是华为公司提出的一种交换机堆叠技术&#xff0c;它允许用户将多台物理交换机设备连接在一起&#xff0c;从而逻辑上形成一个单一的、统一的、大容量的虚拟交换机。IRF堆叠技术通过堆…

抽象java入门1.3.1

前言&#xff1a; 本期内容是为了更好补充关于方法&#xff08;函数&#xff09;的定义 开始&#xff1a; 函数&#xff08;function&#xff09;表示每个输入值对应唯一输出值的一种对应关系。 核心在于&#xff1a;输入值和输出值这两个元素 真的吗&#xff1f; 错&…

【自动部署】4.阿里云ECS服务器 IDEA自动部署项目

如何在IDEA中,自动部署项目到阿里云ECS服务器?今天我们就来实现一键部署功能。 执行maven命令打包免密登录,在IEDA中连接服务器执行stop服务上传jar包到服务器执行start脚本查看运行日志1.安装Alibaba Cloud Toolkit 2.配置host 3.自动化部署后端 右击项目,选择Alibaba CL…

第一篇红队笔记-百靶精讲之W1R3S-john

https://download.vulnhub.com/w1r3s/w1r3s.v1.0.1.zip 主机发现 nmap端口扫描及思路 扫描某个网段 扫描单个ip所有端口 重复扫描单个ip具体端口 udp协议再来一次 漏洞扫描 FTP渗透 尝试匿名登陆 防止文件损坏 识别加密方式-hash-identifier base64 Web目录爆破…

C#操作MySQL从入门到精通(19)——插入数据

前言: 谈到数据库,大家最容易脱口而出的就是增删改查,在本篇文章之前一直都是说的各种查询,本文就是说的增删改查中的增,所谓增也就是增加数据的意思,插入数据就是增加数据。 本文测试使用的数据库如下: 1、插入完整行 所谓插入完整行就是一行所有列的数据都是自己插…

C++中的常见I/O方式

目录 摘要 1. 标准输入输出&#xff08;Standard I/O&#xff09; 2. 文件输入输出&#xff08;File I/O&#xff09; 3. 字符串流&#xff08;String Stream&#xff09; 4. 低级文件I/O&#xff08;Low-level File I/O&#xff09; 5. 内存映射文件&#xff08;Memory-…

《精通ChatGPT:从入门到大师的Prompt指南》第4章:避免常见错误

第4章&#xff1a;避免常见错误 在使用ChatGPT进行Prompt编写时&#xff0c;常见的错误可能会大大影响生成内容的质量和准确性。本章将详细讨论这些错误&#xff0c;并提供如何避免它们的建议。 4.1 不明确的指令 在使用ChatGPT时&#xff0c;一个常见的问题是指令不够明确。…

理解数仓建模

​​​在数仓建设的过程中&#xff0c;由于未能完全按照规范操作&#xff0c; 从而导致数据仓库建设比较混乱&#xff0c;常见有以下问题&#xff1a; 数仓常见问题 ● 数仓分层不清晰&#xff1a;数仓的分层没有明确的逻辑&#xff0c;难以管理和维护。 ● 数据域划分不明确…

[数据集][目标检测]高空抛物数据集VOC+YOLO格式259张+6段视频+yolov8模型+探讨

这个是从6段简短抛物视频里面截取的259张图片用labelImg进行标注得到提供voc和yolo格式以供大家训练和研究。目录我已经提供了yolov8s训练好的模型和训练日志&#xff0c;如果不想训练的可以直接用我这个模型即可&#xff0c;选择使用best.pt或last.pt即可。目录结构&#xff1…

【网络编程开发】10.UNIX套接字域

10.UNIX套接字域 UNIX域套接字是用于在同一台计算机上运行的进程之间进行通信的一种机制。它与传统基于TCP/IP协议栈的套接字不同&#xff0c;UNIX域套接字操作更为高效&#xff0c;因为它避免了网络层的开销&#xff0c;不涉及网络报头、检验和、顺序号等复杂的网络协议处理过…

ANSYS APDL中使用SF和SFFUN命令,对不同节点施加不同大小的面载荷

SF命令通常是对 所选择的节点集合 施加同样大小的载荷&#xff0c;如&#xff1a; NSEL, S, LOC, Y, 5 ! 选择y坐标值为5的全部结点 SF, ALL, PRES, 1 ! 施加均布荷载 完整命令流&#xff1a; Finish !退出当前处理器 /Clear,al…

websocket发送数据

1. 使用JSON格式传输参数 可以使用库如Jackson或Gson来处理JSON。 客户端发送JSON消息&#xff1a; var socket new WebSocket("ws://localhost:8080/ws"); socket.onopen function() {var message {"action": "greet","name": …

tensorRT 自定义算子plugin的实现

文章目录 1. 自定义算子导出onnx1.1 自定义算子的实现类1.2 自定义算子类1.3 onnx导出2. 自定义算子plugin的实现2.1 Plugin类的实现2.1.1 构造函数的实现2.1.2 析构函数实现2.1.3 serialize函数的实现2.1.4 destory函数的实现2.1.5 enqueue函数的实现(关键)2.1.5.1 customSc…

C#操作MySQL从入门到精通(16)——使用子查询

前言: 我们在查询数据的过程中有时候查询的数据不是从数据库中来的,而是从另一个查询的结果来的,这时候就需要使用子查询,本文使用的测试数据如下: 1、子查询 下面的代码就是先查询地址是安徽和广西的学生年龄,然后获取年龄对应的姓名 private void button__SubQuery…

Spring boot+vue前后端分离

目录 1、前端vue的搭建 2、后端项目的构建 pom文件中引入的jar包 yml文件用来配置连接数据库和端口的设置 application.property进行一些整合 service层 imp层 mapper 实体类 额外写一个类、解决跨域问题 3、测试 1、前端vue的搭建 建立项目的过程略 开启一个建立好…

【SZUOJ】【高精度板子】E. 大整数计算(运算符重载)

被学校oj的高精度恶心到了&#xff0c;所以我觉得以后把它当板子 //??CBigInteger????? /********** Write your code here! **********/ #include<bits/stdc.h> using namespace std; class CBigInteger { public:vector<int> a;int si;CBigInteger(){si1…