Vue.js 中的父子组件通信方式
Vue.js 中的父子组件通信方式
在 Vue.js 中,组件是构建应用程序的基本单元。当我们在应用程序中使用组件时,组件之间的通信是非常重要的。在 Vue.js 中,父子组件通信是最常见的组件通信方式之一。在本文中,我们将讨论 Vue.js 中的父子组件通信方式,并附上代码实例。

父组件向子组件传递数据
Props
props 是 Vue.js 中父组件向子组件传递数据的一种方式。通过 props,父组件可以向子组件传递任何类型的数据,包括字符串、数字、对象、数组等等。在子组件中,props 是只读的,不能直接修改,只能通过事件的方式向父组件发送数据。
下面是一个使用 props 传递数据的示例:
<!-- 父组件 -->
<template><div><my-child :message="parentMessage"></my-child></div>
</template><script>
import MyChild from './MyChild.vue';export default {components: {MyChild,},data() {return {parentMessage: '这是来自父组件的消息',};},
};
</script>
<!-- 子组件 -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {props: {message: String,},
};
</script>
在上面的示例中,父组件通过 props 将 parentMessage 传递给子组件 MyChild,并将其命名为 message。在子组件中,我们可以通过 props 对象来声明 message 属性,然后在模板中使用它来渲染数据。
Sync 修饰符
除了 props 之外,Vue.js 还提供了一个 Sync 修饰符,可以通过它来实现双向数据绑定。Sync 修饰符实际上是一个语法糖,它将父组件向子组件传递数据和子组件向父组件发送数据的操作包装在一起。
下面是一个使用 Sync 修饰符的示例:
<!-- 父组件 -->
<template><div><my-child :message.sync="parentMessage"></my-child></div>
</template><script>
import MyChild from './MyChild.vue';export default {components: {MyChild,},data() {return {parentMessage: '这是来自父组件的消息',};},
};
</script>
<!-- 子组件 -->
<template><div><input v-model="message" @input="$emit('update:message', message)" /></div>
</template><script>
export default {props: {message: String,},
};
</script>
在上面的示例中,父组件通过 :message.sync 将 parentMessage 传递给子组件 MyChild,并使用 v-model 指令将子组件的 message 属性与一个输入框进行双向绑定。在子组件中,我们使用 @input 事件将输入框的值发送给父组件,实现双向数据绑定。
子组件向父组件传递数据
自定义事件
除了 props 之外,子组件还可以通过自定义事件向父组件传递数据。在子组件中,我们可以使用 $emit 方法触发一个自定义事件,并将数据作为参数传递给父组件。父组件可以通过 v-on 指令监听子组件的自定义事件,并在事件处理函数中获取子组件传递的数据。
下面是一个使用自定义事件传递数据的示例:
<!-- 父组件 -->
<template><div><my-child @child-click="handleChildClick"></my-child></div>
</template><script>
import MyChild from './MyChild.vue';export default {components: {MyChild,},methods: {handleChildClick(data) {console.log('从子组件传递过来的数据:', data);},},
};
</script>
<!-- 子组件 -->
<template><div><button @click="handleClick">点击我向父组件传递数据</button></div>
</template><script>
export default {methods: {handleClick() {this.$emit('child-click', '这是来自子组件的消息');},},
};
</script>
在上面的示例中,子组件 MyChild 中定义了一个按钮,并在按钮的 click 事件中触发了一个自定义事件 child-click,并将数据 '这是来自子组件的消息' 作为参数传递给父组件。父组件通过 @child-click 指令监听子组件的自定义事件,并在事件处理函数中打印子组件传递的数据。
$refs
除了自定义事件之外,子组件还可以通过 $refs 属性来访问父组件,从而向父组件传递数据。在父组件中,我们可以通过 ref 属性给子组件命名,然后在父组件中通过 $refs 属性访问子组件实例,并调用子组件中的方法或访问子组件中的数据。
下面是一个使用 $refs 传递数据的示例:
<!-- 父组件 -->
<template><div><my-child ref="child"></my-child><button @click="handleClick">点击我向子组件传递数据</button></div>
</template><script>
import MyChild from './MyChild.vue';export default {components: {MyChild,},methods: {handleClick() {this.$refs.child.handleParentClick('这是来自父组件的消息');},},
};
</script>
<!-- 子组件 -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: '',};},methods: {handleParentClick(data) {this.message = data;},},
};
</script>
在上面的示例中,父组件中通过 ref 属性给子组件命名为 child。在父组件中,我们通过 $refs.child 访问 MyChild 组件实例,并调用子组件中的 handleParentClick 方法,将数据 '这是来自父组件的消息' 传递给子组件。在子组件中,我们将传递过来的数据赋值给 message 属性,然后在模板中渲染出来。
父子组件之间的访问
在 Vue.js 中,父组件可以通过 $children 属性访问它的所有子组件实例,而子组件可以通过 $parent 属性访问它的父组件实例。
下面是一个示例:
<!-- 父组件 -->
<template><div><my-child></my-child><my-child></my-child><button @click="handleClick">点击我访问子组件</button></div>
</template><script>
import MyChild from './MyChild.vue';export default {components: {MyChild,},methods: {handleClick() {console.log(this.$children);},},
};
</script>
<!-- 子组件 -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: '这是来自子组件的消息',};},created() {console.log(this.$parent);},
};
</script>
在上面的示例中,父组件中定义了两个子组件 MyChild。在父组件中,我们通过 $children 属性访问所有子组件,并在点击按钮时打印所有子组件实例。在子组件中,我们在 created 钩子函数中访问了父组件实例,并在模板中渲染出了一个消息。
总结
在 Vue.js 中,父子组件通信是非常重要的。在本文中,我们讨论了 Vue.js 中父子组件通信的几种方式,包括使用 props 传递数据、使用 Sync 修饰符实现双向绑定、使用自定义事件传递数据、使用 $refs 访问子组件实例以及使用 $children 和 $parent 访问父子组件实例。这些技术可以帮助我们更好地组织和管理应用程序中的组件,并提高组件之间的交互性。
在实际开发中,我们可以根据具体的业务需求选择合适的技术来实现父子组件通信。如果需要向子组件传递静态数据,可以使用 props;如果需要实现双向数据绑定,可以使用 Sync 修饰符;如果需要向父组件传递数据,可以使用自定义事件;如果需要访问子组件实例,可以使用 $refs,如果需要访问父子组件实例,可以使用 $children 和 $parent。
在下面的代码示例中,我们将展示如何使用 props、自定义事件和 $refs 这三种方式实现父子组件之间的通信。
<!-- 父组件 -->
<template><div><my-child :message="parentMessage" @child-click="handleChildClick" ref="child"></my-child><button @click="handleClick">点击我向子组件传递数据</button></div>
</template><script>
import MyChild from './MyChild.vue';export default {components: {MyChild,},data() {return {parentMessage: '这是来自父组件的消息',};},methods: {handleChildClick(data) {console.log('从子组件传递过来的数据:', data);},handleClick() {this.$refs.child.handleParentClick('这是来自父组件的消息');},},
};
</script>
<!-- 子组件 -->
<template><div><p>{{ message }}</p><button @click="handleClick">点击我向父组件传递数据</button></div>
</template><script>
export default {props: {message: String,},methods: {handleClick() {this.$emit('child-click', '这是来自子组件的消息');},handleParentClick(data) {console.log('从父组件传递过来的数据:', data);},},
};
</script>
在上面的示例中,父组件通过 props 向子组件传递数据,并在子组件中使用自定义事件向父组件传递数据。同时,父组件还使用 $refs 属性访问子组件实例,并调用子组件中的方法,向子组件传递数据。
相关文章:
Vue.js 中的父子组件通信方式
Vue.js 中的父子组件通信方式 在 Vue.js 中,组件是构建应用程序的基本单元。当我们在应用程序中使用组件时,组件之间的通信是非常重要的。在 Vue.js 中,父子组件通信是最常见的组件通信方式之一。在本文中,我们将讨论 Vue.js 中的…...
Python之并发编程二多进程理论
一、什么是进程 进程:正在进行的一个过程或者说一个任务。而负责执行任务则是cpu。 二、进程与程序的区别 程序仅仅只是一堆代码而已,而进程指的是程序的运行过程。 三、并发与并行 无论是并行还是并发,在用户看来都是’同时’运行的&am…...
纯干货:数据库连接耗时慢原因排查
背景 最近公司的社区相关的服务需要优化,由于对业务不熟悉,只能借助监控从一些慢接口开始尝试探索慢的原因。由于社区相关的功能务是公司小程序流量入口,所以相应的服务访问量还是比较高的。针对这类高访问的项目,任何不留神的地…...
【OneNet】| stm32+esp8266-01s—— OneNet初体验 | 平台注册及设备创建 | demo使用
系列文章目录 失败了也挺可爱,成功了就超帅。 文章目录 前言1. OneNet平台注册2. 创建多协议接入设备3. 硬件连接4. 下载并运行Demo4.1 Demo下载4.2 运行Demo本小节结束 前言 最近准备耍下 Onenet平台 。下载了官方demo 遇到几个问题 1、创建接入设备 因为平台网页…...
解决win无法删除多层嵌套文件夹
起因:昨天研究jpackage工具,不小心搞得一个文件夹里嵌套了好几百个文件夹,用win自己的删除删不掉,shiftdel直接删除也不行,直接弹窗删除错误; 后来用电脑管家下载了个“文件粉碎”,添加目录&am…...
用Vue简单开发一个学习界面
文章目录 一.首先创建我们的Vue文件夹二.源代码BodyDemoHearderDemoHomeDemoMarkdownDemoFileManager.jsMain.js(注意绑定)APP源代码 效果图(按钮功能)新增二级菜单(v-for)需要的可以私信 一.首先创建我们的…...
Oracle数据库从入门到精通系列之五:数据文件
Oracle数据库从入门到精通系列之五:数据文件 一、数据文件二、Oracle数据库存储分配单位三、Oracle数据库文件系统机制四、段五、区段六、块七、表空间八、Oracle数据库存储层次体系小结一、数据文件 数据文件和重做文件是数据库中最重要的文件,数据最终会存储在这些文件中。…...
使用MockJS进行前端开发中的数据模拟
在前端开发中,有时我们需要在没有后端接口的情况下进行前端页面的开发和测试。这时,我们可以使用MockJS来模拟数据,以便进行开发和调试。MockJS是一个用于生成随机数据和拦截Ajax请求的JavaScript库,它能够帮助我们快速搭建起一个…...
Ex-ChatGPT本地部署+Azure OpenAI接口配置+docker部署服务
Ex-ChatGPT项目分为 Ex-ChatGPT 和 WebChatGPTEnhance 两部分,Ex-ChatGPT启动后是个web服务,通过访问ip端口体验; WebChatGPTEnhance可编译生成一个浏览器插件,Chrome或者Microsoft edge浏览器可以安装该插件,点击该插…...
【收藏】FP独立站建站安心收款经验分享
前几天有个客户咨询我,跟我说了他的疑问。他是在阿里巴巴国际站上面做鞋服,但看到同行在独立站上铺fp,所以他想问问:怎么建立一个独立站并在上面成功推出fp呢?今天,我就来跟有类似诉求的朋友们分享一下&…...
python:绘制GAM非线性回归散点图和拟合曲线
作者:CSDN _养乐多_ 本文将介绍使用python语言绘制广义线性模型(Generalized Additive Model,GAM)非线性回归散点图和拟合曲线。并记录了计算RMSE、ubRMSE、R2、Bias的代码。 文章目录 一、GAM非线性回归详解二、代码三、计算RM…...
每日算法(第十四期)
儿童节了也要好好学习鸭。 先来回顾一下上期的问题及答案: 「反转链表」(Reverse Linked List)。 题目描述: 反转一个单链表。 以下是对应的JavaScript实现: function reverseList(head) {let prev null;let curr he…...
uboot的使用
目录 串口调试 1.uboot模式 自启动模式: 交互模式 2.uboot帮助命令 3.uboot环境变量 4.uboot常用环境变量 5.uboot网络传输命令 6.uboot存储器访问命令 7.uboot自启动环境变量 串口调试 1.串口连接开发板,通过 "设备管理器" 获取对…...
学习HCIP的day.09
目录 一、BGP:边界网关路由协议 二、BGP特点: 三、BGP数据包 四、BGP的工作过程 五、名词注解 六、BGP的路由黑洞 七、BGP的防环机制—水平分割 八、BGP的基本配置 一、BGP:边界网关路由协议 是一种动态路由协议,且是…...
Electron-Builder Windows系统代码签名
前言 项目打包签名是两年前做的了,使用Electron-Bulder,打包工具版本迭代较少,倒是electron版本更新飞快,目前官方推荐使用Electron Forge进行打包,后续再对两者进行对比,重新整理现在的实现方案。 签名简…...
数据分析概述
数据分析概述 数据的性质数据的概念数据与信息的区别和联系 数据的类型按照度量尺度分按时间状况分 什么是数据分析数据分析的重要性数据分析的内容数据分析作用 数据分析的基本流程典型的数据分析的流程 数据分析方法对比分析法分组分析法定量数据分布分析——具体事例 结构分…...
网络编程初识
如果这篇有没接触过的知识点,请转到网络编程先导知识_小梁今天敲代码了吗的博客-CSDN博客 目录 IPv4和IPv6的概念: 子网掩码 默认网关 ping命令 端口 OSI网络分层模型 TCP/IP四层模型 字节序转换函数 IP地址转换 上一篇介绍了网络编程的先导知…...
软考A计划-试题模拟含答案解析-卷十二
点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 👉关于作者 专注于Android/Unity和各种游戏开发技巧,以及各种资源分享&am…...
I.MX RT1170加密启动详解(1):Encrypted Boot image组成
使用RT1170芯片构建的所有平台一般都是高端场合,我们需要考虑软件的安全需求。该芯片集成了一系列安全功能。这些特性中的大多数提供针对特定类型攻击的保护,并且可以根据所需的保护程度配置为不同的级别。这些特性可以协同工作,也可以独立工…...
Linux---用户切换命令(su命令、sudo命令、exit命令)
1. su命令 root用户拥有最大的系统操作权限,而普通用户在许多地方的权限是受限的。 普通用户的权限,一般在其HOME目录内是不受限的。 一旦出了HOME目录,大多数地方,普通用户仅有只读和执行权限,无修改权限。 su 是…...
Spark 之 入门讲解详细版(1)
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室(Algorithms, Machines, and People Lab)开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目,8个月后成为Apache顶级项目,速度之快足见过人之处&…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
Xela矩阵三轴触觉传感器的工作原理解析与应用场景
Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知,帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量,能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度,还为机器人、医疗设备和制造业的智…...
uni-app学习笔记三十五--扩展组件的安装和使用
由于内置组件不能满足日常开发需要,uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件,需要安装才能使用。 一、安装扩展插件 安装方法: 1.访问uniapp官方文档组件部分:组件使用的入门教程 | uni-app官网 点击左侧…...
高分辨率图像合成归一化流扩展
大家读完觉得有帮助记得关注和点赞!!! 1 摘要 我们提出了STARFlow,一种基于归一化流的可扩展生成模型,它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流(TARFlow&am…...
用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法
用神经网络读懂你的“心情”:揭秘情绪识别系统背后的AI魔法 大家好,我是Echo_Wish。最近刷短视频、看直播,有没有发现,越来越多的应用都开始“懂你”了——它们能感知你的情绪,推荐更合适的内容,甚至帮客服识别用户情绪,提升服务体验。这背后,神经网络在悄悄发力,撑起…...
工厂方法模式和抽象工厂方法模式的battle
1.案例直接上手 在这个案例里面,我们会实现这个普通的工厂方法,并且对比这个普通工厂方法和我们直接创建对象的差别在哪里,为什么需要一个工厂: 下面的这个是我们的这个案例里面涉及到的接口和对应的实现类: 两个发…...
