Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解

目录

前言

父组件传子组件 ---- props

给要传递数据的子组件绑定要传过去的属性及属性值

在子组件中使用props配置项接收

props配置项

子组件传父组件 ---- 组件的自定义事件

子组件向父组件传递数据

通过代码来绑定自定义事件


前言

本文将介绍在Vue中父子组件如何进行通信

父组件传子组件 ---- props

这里先介绍父组件如何向子组件传递数据

首先创建脚手架Cli

创建父组件App.vue和子组件SonX.vue

注册好子组件并在父组件中使用

子组件

导出子组件

<template><div><h1>我是儿子</h1></div>
</template><script>
export default {name:'SonX'
}
</script><style></style>

父组件

导入子组件并注册使用

<template><div id="app"><SonX></SonX></div>
</template><script>
import SonX from './components/SonX.vue'export default {name: 'App',components: {SonX}
}
</script><style></style>

给要传递数据的子组件绑定要传过去的属性及属性值

仅在子组件上添加属性

<template><div id="app"><SonX name="zs" age="20" gender="男"></SonX></div>
</template>

在子组件中使用props配置项接收

<template><div><h1>我是儿子</h1><h2>{{name}}</h2><h2>{{age}}</h2><h2>{{gender}}</h2></div>
</template><script>
export default {name:'SonX',props:['name','age','gender']
}
</script><style></style>

效果

成功渲染到页面上

props配置项

注意:不要直接修改props中的数据

简单接收,直接采用数组形式接收:

props:['name','age','gender']

添加类型限制:

props:{

        name:String,

        age:Number,

        gender:String

}

当添加了类型限制后,如果父组件传过去属性值不符合就会报错

如下,父组件传过去的age='20'是字符串,并不是数字,所以就报错了

添加类型限制,并且还可以添加默认值,还可以添加必要性:

props:{

        name:{

                type:String,

                required:true

                        },

        age:{

                type:Number,

                default:20

                        },

        gender:{

                type:String,

                required:true

                        }

}

添加了默认值和必要性,当添加必要性时,如果没有传递就会报错,添加了默认值,如果没有传递该属性,子组件就会使用默认值

子组件传父组件 ---- 组件的自定义事件

在父组件中

先在子组件上自定义一个事件

v-on:事件名='函数' 或 @事件名="函数"

<template><div id="app"><SonX name="zs" age="20" gender="男" v-on:event="think"></SonX></div>
</template><script>
import SonX from './components/SonX.vue'export default {name: 'App',components: {SonX},methods:{think(){console.log('传递成功');}}
}
</script><style></style>

在子组件中

用以下方法进行对自定义事件的执行

this.$emit('自定义的事件名')

<template><div><h1>我是儿子</h1><h2>{{name}}</h2><h2>{{age}}</h2><h2>{{gender}}</h2><button @click="think2">测试</button></div>
</template><script>
export default {name:'SonX',props:['name','age','gender'],methods:{think2(){this.$emit('event')}}
}
</script>

子组件向父组件传递数据

子组件中

this.$emit('自定义的事件名',传递的参数)

<template><div><h1>我是儿子</h1><button @click="think2">测试</button></div>
</template><script>
export default {name:'SonX',data(){return {name:'ls',age:30,gender:'女'}},methods:{think2(){this.$emit('event',this.name,this.age,this.gender)}}
}
</script>

父组件中

对子组件中传过来的数据进行接收

<template><div id="app"><SonX name="zs" age="20" gender="男" v-on:event="think"></SonX></div>
</template><script>
import SonX from './components/SonX.vue'export default {name: 'App',components: {SonX},methods:{think(name,age,gender){console.log(name,age,gender);}}
}
</script>

成功接收并打印出来

通过代码来绑定自定义事件

先通过ref获取子组件

ref='组件名'

在mounted钩子函数中

this.$refs.ref获取到的组件名.$on('自定义事件名',回调函数)

<template><div id="app"><SonX ref="SonX"></SonX></div>
</template><script>
import SonX from './components/SonX.vue'export default {name: 'App',mounted(){this.$refs.SonX.$on('event',this.think)},components: {SonX},methods:{think(name,age,gender){console.log(name,age,gender);}}
}
</script>

在页面上渲染

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

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

相关文章

【MQTT】使用MQTT在Spring Boot项目中实现异步消息通信

目录 使用MQTT在Spring Boot项目中实现异步消息通信步骤1&#xff1a;引入MQTT库依赖步骤2&#xff1a;配置MQTT连接信息步骤3&#xff1a;创建MQTT配置类步骤4&#xff1a;发送MQTT消息发布MQTT消息消费MQTT消息 总结 前置文章&#xff1a; &#xff08;一&#xff09;MQTT协议…

基于深度学习的视觉应用

基于深度学习的视觉应用&#xff0c; 又名&#xff1a;机器视觉之从调包侠到底层开发&#xff08;第4天&#xff09; PS:这个系列是准备做从Python一些接口应用开发&#xff0c;openCV基础使用场景原理讲解&#xff0c;做一些demo案例讲解&#xff0c;然后开始数学基础复习&am…

PHP在线考试平台管理系统源码带文字搭建教程和操作手册

PHP在线考试平台管理系统源码带文字搭建教程和操作手册 技术架构 PHP7.2 Thinkphp6 React UmiJs nginx mysql5.7 cnetos7以上 宝塔面板 系统功能特性与介绍 采用PHP7强类型&#xff08;严格模式&#xff09;。 题库管理 支持多种试题类型和录题方式。 考生管理 快速导入考…

鸿蒙开发环境搭建-高频环境问题解决

1.Node版本问题 由于SDK的部分工具依赖Node.js运行时&#xff0c;推荐使用配套API版本的Node.js&#xff0c;保证工程的兼容性。 匹配关系见下表&#xff1a; API LevelNode.js支持范围API Level≤914.x&#xff08;≥14.19.1&#xff09;、16.xAPI Level>914.x&#xff0…

【Java万花筒】数据之翼:Java库助您飞跃科学计算高峰

Java数据魔法&#xff1a;探秘科学计算之道 前言 随着科技的不断发展&#xff0c;数据处理和科学计算在各行各业中扮演着愈发重要的角色。为了更高效、更准确地进行数据分析、科学计算和可视化展示&#xff0c;Java开发者广泛使用各种强大的库。本文将深入探讨几个在数据处理…

鲁迅经典名言100句

要继续调整心性&#xff0c;安静读书&#xff0c;一步一步按计划完成工作&#xff0c;然后就可以更加幸福。这个道理真简单&#xff0c;但是我从没看见谁做到过。— —《读书与跌宕自喜》 中国大约太老了&#xff0c;社会上事无大小&#xff0c;都恶劣不堪&#xff0c;像一只黑…

基于多媒体的深度学习 Midreport自我总结分析

Resistor Ohm Value Estimation Challenge 需要将误差降低到1%以下 1、调整模型架构&#xff1a;增加模型的复杂性&#xff0c;例如增加卷积层或全连接层的数量&#xff0c;增加神经元数量等 # 在 ResistorEstimator 类的 CNN 方法中进行修改 def CNN(self, type):input In…

Selenium登录网页时,不定时出现异常弹窗的四种解决方案

方案一&#xff1a;加个异常判断&#xff0c;出现了就重新登录 以下是一个简单的伪代码示例&#xff0c;展示了如何加入异常判断并重新登录&#xff1a; def login():# 登录操作if login_success:return Trueelse:return Falsedef check_usbkey_matching():# 检查当前用户与U…

【纯CSS特效源码】(一)几款漂亮的文字特效

1.渐变文字 使用background: -webkit-linear-gradient(#d8ecec, #2d888b);定义背景渐变色 并使用-webkit-text-fill-color: transparent;指定了文本字符的填充颜色 <!DOCTYPE html> <html><style>body {background-color: #111;}#content {position: abso…

通俗理解 | 波数的概念

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:波数的物理含义 揭开波数奥秘:波数的物理含义解读 通俗理解: 致力于在无需任何专业知识的前提下,从本质上理解专业的概念 背景介绍 在研究波动时,我们常会遇到一个重要物理量—…

汽车专业翻译,如何选择好的翻译公司?

随着中国汽车市场的不断壮大和国际化的步伐加快&#xff0c;众多外国汽车品牌纷纷进军中国市场&#xff0c;与此同时&#xff0c;国内汽车企业也在积极拓展海外版图。在此背景下&#xff0c;汽车企业与国际客户、供应商和合作伙伴的交流日益频繁。因此&#xff0c;拥有一支专业…

包图作业

包图作业 一. 简答题&#xff08;共2题&#xff0c;100分&#xff09; (简答题) .包依赖应该与内部关系的联系与区别 正确答案&#xff1a; 当一个包依赖于另一个是&#xff0c;这意味着两个包的内容间存在着一个或多个的关系。 例如&#xff1a;如果是一个用例包图&#xff0…

Javascript jQuery简介

✨前言✨ 1.如果代码对您有帮助 欢迎点赞&#x1f44d;收藏⭐哟 后面如有问题可以私信评论哟&#x1f5d2;️ 2.博主后面将持续更新哟&#x1f618;&#x1f389;本章目录&#x1f389; &#x1f95d;一.jQuery简介&#x1f965;二.JQeury常用API&#x1f347;1.jQeury选择…

Redis 如何做内存优化

Redis 如何做内存优化 Redis 提供了一些内存优化的手段&#xff0c;包括压缩、过期设置、分片等。下面是一些内存优化的方法和代码示例&#xff1a; 压缩存储&#xff1a; Redis 5.0 版本引入了对字符串的压缩存储功能&#xff0c;可以在字符串的存储和传输中进行压缩&#xf…

PingCAP 受邀参加 FICC 2023,获 Open100 世纪全球开源贡献奖

2023 年 12 月&#xff0c;2023 国际测试委员会智能计算与芯片联邦大会&#xff08;FICC 2023&#xff09;在海南三亚举办&#xff0c;中外院士和数十位领域专家莅临出席。 大会现场 &#xff0c;开放源代码促进会创始人 Bruce Perens 颁发了 Open100 世纪全球开源贡献奖&…

mysql 一对多 合并多个通过 逗号拼接展示

mysql 一对多 合并多个通过 逗号拼接展示 以上内容由chatgpt中文网 动态生成 SELECTuser_id,project_id,GROUP_CONCAT(project_specs_id) AS merged_specs_ids FROMzt_medication_specs_total WHEREspecs_num_total < 5 GROUP BYuser_id, project_id;laravel model 对应写…

UE5 通过接口实现角色描边效果

接口不能够被实例化&#xff0c;不能够在内部书写函数的逻辑和设置属性&#xff0c;只能够被继承使用。它能够让不同的类实现有相同的函数&#xff0c;继承接口的类必须实现接口的函数。 并且&#xff0c;我们可以在不同的类里面的函数实现也不同&#xff0c;比如A类描边是红色…

【2019】360Java工程师客观题总结

这套试卷比上次做的第一套要好一丢丢&#xff0c;但也没好到哪里去。。 一.运行下面测试方法&#xff0c;以下哪种输出是正确的 Testpublic void TestA() {assertEquals(4, 2 1);System.out.println("Test A");}首先我们要注意这里考察的是单元测试里的断言&#x…

什么是云服务器ECS及其优势、购买、使用方式和部署建议

阿里云服务器ECS英文全程Elastic Compute Service&#xff0c;云服务器ECS是一种安全可靠、弹性可伸缩的云计算服务&#xff0c;阿里云提供多种云服务器ECS实例规格&#xff0c;如经济型e实例、通用算力型u1、ECS计算型c7、通用型g7、GPU实例等&#xff0c;阿里云百科aliyunbai…

超级好看的个人主页源码

源码介绍 超级好看的个人主页源码HTML,使用了 HTML、CSS 和 JavaScript 技术&#xff0c;带音乐播放器 需要修改什么到代码里面自行修改,记事本就可以打开&#xff0c;总之&#xff0c;这个个人主页源码非常漂亮和实用&#xff0c;使用了许多现代的 Web 技术来创建一个响应式、…