vue父组件和子组件数据传递

vue --父组件向子组件传递数据

父组件:

<template><div class="parent"><p>父组件:{{ msg }}</p><Child message="Hello, I am parent!"></Child></div>
</template><script>import Child from './Child'export default {name: 'Parent',data () {return {msg: 'Hello world'}}}
</script><style lang="less" scoped></style>

子组件:

<template><div class="child"><p>子组件:{{ message }}</p></div>
</template><script>export default {name: 'Child',props: ['message'],data () {return {}}}
</script><style lang="less" scoped></style>

父组件向子组件传值方式:
1、父组件引入子组件,注册属性message
2、子组件通过props来获取到注册的属性message

页面显示:
 

uploading.4e448015.gif

转存失败重新上传取消

2、子组件触发事件向父组件传递数据

父组件:

<template><div class="parent"><p>父组件:{{ msg }},显示子组件传来的值:{{ showChildData }}</p><Child message="Hello, I am parent!" @event="handler"></Child></div>
</template><script>import Child from './Child'export default {name: 'Parent',data () {return {msg: 'Hello world',showChildData: ''}},methods: {handler (data) {console.log(data)this.showChildData = data}}}
</script><style lang="less" scoped></style>

子组件:

<template><div class="child"><p>子组件:{{ message }}</p><input type="button" @click="transmit" value="向父组件传递数据"></div>
</template><script>export default {name: 'Child',props: ['message'],data () {return {childData: 'Hello, I am child'}},methods: {transmit () {this.$emit('event', this.childData)}}}
</script><style lang="less" scoped></style>

子组件向父组件传值方式:
1、父组件注册事件event
2、子组件由transmit事件方法,通过$emit('', data)向父组件传值

页面点击子组件按钮可以获得以下效果:

uploading.4e448015.gif

转存失败重新上传取消

3、父组件直接调取子组件数据

父组件:

<template><div class="parent"><p>显示子组件传来的值:{{ showChildData }}</p><Child ref="child"></Child><input type="button" @click="getChildData" value="获取子组件的数据"></div>
</template><script>import Child from './Child'export default {name: 'Parent',data () {return {showChildData: ''}},methods: {getChildData () {this.showChildData = this.$refs.child.childData}}}
</script><style lang="less" scoped></style>

子组件:

<template><div class="child"><input type="text" v-model="childData"><p>子组件:{{ childData }}</p></div>
</template><script>export default {name: 'Child',data () {return {childData: 'Hello, I am child'}},methods: {}}
</script><style lang="less" scoped></style>

父组件直接获取子组件数据:
1、父组件引入子组件,添加ref属性
说明:ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例
注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册
2、父组件直接通过 this.$refs.child.属性 获取数据
说明:在父组件里面通过以下方式获取子组件的属性和方法
this.$refs.child.属性
this.$refs.child.方法

页面效果:

uploading.4e448015.gif

转存失败重新上传取消

4、子组件直接调取父组件数据

父组件:

<template><div class="parent"><input type="text" v-model="parentData" style="width: 500px;"><p>父组件:{{ parentData }}</p><Child></Child></div>
</template><script>import Child from './Child'export default {name: 'Parent',data () {return {parentData: 'Hello, I am parent!'}},methods: {}}
</script><style lang="less" scoped></style>

子组件:

<template><div class="child"><p>子组件:{{ showParentData }}</p><input type="button" @click="getParentData" value="获取父组件的数据"></div>
</template><script>export default {name: 'Child',data () {return {showParentData: ''}},methods: {getParentData () {this.showParentData = this.$parent.parentData}}}
</script><style lang="less" scoped></style>

父组件直接获取子组件数据:
1、父组件引入子组件
2、子组件直接通过 this.$parent.属性 获取数据
说明:在子组件里面通过以下方式获取子组件的属性和方法
this.$parent.属性
this.$parent.方法

页面效果:

uploading.4e448015.gif

转存失败重新上传取消

来源:https://segmentfault.com/a/1190000018862352?utm_source=sf-similar-article

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

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

相关文章

【Linux】udp客户端windows版以及Tcp服务器的实现

windows版客户端更适合大多数人~ 文章目录 一. udp客户端windows版二.Tcp服务器的实现总结 一、udp客户端windows版 首先我们将上一篇文章中实现的udp大型聊天室的代码进行修改&#xff0c;注意我们只修改服务端代码将代码修改的很简单就好&#xff0c;因为我们只是做一个如何…

【Flume 01】Flume简介、部署、组件

1 Flume简介 Flume是一个高可用、高可靠、分布式的海量日志采集、聚合和传输的系统 主要特性&#xff1a; 它有一个简单、灵活的基于流的数据流结构&#xff08;使用Event封装&#xff09;具有负载均衡机制和故障转移机制一个简单可扩展的数据模型(Source、Channel、Sink) Sou…

Zookeeper的基本概念以及安装

Zookeeper简介 Zookeeper是一个分布式的(多台机器同时干一件事情),开源的分布式应用程序协调服务,是Google公司Chubby产品,是Hadoop和Base重要的组件,.它是一个分布式应用程序提供一致性的服务的软件,提供的功能包括:配置服务,域名服务,分布式同步,组服务等 Zookeeper目…

多肽试剂1801415-23-5,Satoreotide,UNII-S58172SSTS,应用在多肽标记及修饰上

资料编辑|陕西新研博美生物科技有限公司小编MISSwu​ Satoreotide&#xff0c;UNII-S58172SSTS Product structure Product specifications 1.CAS No&#xff1a;1801415-23-5 2.Molecular formula&#xff1a;C58H72ClN15O14S2 3.Molecular weight&#xff1a;1302.9 4.Packa…

手机word文档怎么转换成pdf?分享两种方法

手机word文档怎么转换成pdf&#xff1f;在如今信息化的时代&#xff0c;电子文档已经成为人们日常办公不可或缺的一部分。随着科技的不断进步&#xff0c;电子文档的格式也在不断发展。PDF作为电子文档的一种重要格式&#xff0c;被广泛使用。那么&#xff0c;如何将手机上的Wo…

一)Stable Diffusion使用教程:安装

目前AI绘画最火的当属Midjorney和Stable Diffusion&#xff0c;但是由于Midjourney没有开源&#xff0c;因此我们主要分享下Stable Diffusion&#xff0c;后面有望补上Midjourney教程。 本节主要讲解Stable Diffusion&#xff08;以下简述SD&#xff09;的下载和安装。 1&…

MyBatis学习笔记——2

MyBatis学习笔记——2 一、MyBatis核心配置文件详解1.1、environment&#xff08;环境&#xff09;1.2、transactionManager&#xff08;事务管理器&#xff09;1.3、dataSource&#xff08;数据源&#xff09;1.4、properties1.5、mapper 二、在WEB中应用MyBatis&#xff08;使…

轮播图添加删除

轮播图页面和对话框搭建 页面简单布局 <template><div id"banner"><el-space direction"vertical" :size"20" style"width: 100%"><h1>轮播图管理</h1><div style"text-align: right"&g…

商城-学习整理-基础-分布式组件(三)

目录 一、前言二、Spring Cloud&Spring Cloud Alibaba1、Spring Cloud 与Spring Cloud Alibaba简介2、为什么使用Spring Cloud Alibaba3、版本选择4、项目中的依赖 三、Spring Cloud Alibaba-Nacos作为注册中心1、Nacos1&#xff09;、下载 nacos-server2&#xff09;、启动…

42. 接雨水

42.接雨水 这是一个简单的动态规划问题&#xff0c;虽然leetcode将它归结为困难。 但是我感觉它难度应该达不到&#xff0c;可能归结为中等比较合适0x1 题目 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨…

python flask 返回中文乱码

使用flask返回数据中带有中文的时候会显示成乱码(ascii)&#xff0c; 中文报文&#xff1a; ABAP中的三大财务报表是&#xff1a;* **资产负债表** * **收入证明** * **现金流量表**这些报表全面概述了公司的财务状况和业绩。* **资产负债表**显示公司在特定时间点的资产、负…

【Python数据分析】Python基础知识篇

&#x1f389;欢迎来到Python专栏~Python基础知识篇 ☆* o(≧▽≦)o *☆嗨~我是小夏与酒&#x1f379; ✨博客主页&#xff1a;小夏与酒的博客 &#x1f388;该系列文章专栏&#xff1a;Python学习专栏 文章作者技术和水平有限&#xff0c;如果文中出现错误&#xff0c;希望大…

LeetCode[1508]子数组和排序后的区间和

难度&#xff1a;Medium 题目&#xff1a; 给你一个数组 nums &#xff0c;它包含 n 个正整数。你需要计算所有非空连续子数组的和&#xff0c;并将它们按升序排序&#xff0c;得到一个新的包含 n * (n 1) / 2 个数字的数组。 请你返回在新数组中下标为 left 到 right &#…

将请求参数数据推送至RabbitMQ队列中并且捕捉消息没有到达交换机的异常

1&#xff1a;自定义mq信息类&#xff08;我的交换这些信息都从nacos上直接取的&#xff0c;怎么从nacos取配置信息看上篇文章&#xff09;&#xff1a; import lombok.AllArgsConstructor; import lombok.Builder; import lombok.Data; import lombok.NoArgsConstructor;impo…

GB2312编码

说明 GB2312代码表用两个字节表示一个图形字符&#xff0c;两个字节中前面的字节为第一字节&#xff0c;后面的字节为第二字节。 区位码&#xff1a; GB2312代码表分成94个区&#xff0c;范围为1-94&#xff0c;区的编号由第一字节表示&#xff1b;每个区有94位&#xff0c;范…

AE 3D粒子插件trapcode particular 新版本

Trapcode Particular for Mac是目前AE系列的插件中最火爆最流行的一款三维粒子插件&#xff0c;是属于Red Giant Trapcode Suite&#xff08;红巨人粒子特效套装插件&#xff09;中的一款粒子插件。该软件提供了多达一百余种粒子效果供用户使用&#xff0c;可以产生各种各样的自…

【mac系统】mac系统调整妙控鼠标速度

当下环境&#xff1a; mac系统版本&#xff0c;其他系统应该也可以&#xff0c;大家可以自行试下&#xff1a; 鼠标 mac妙控鼠标&#xff0c;型号A1657 问题描述&#xff1a; 通过mac系统自带的鼠标速度调节按钮&#xff0c;调到最大后还是感觉移动速度哦过慢 问题解决&…

【Docker】什么是Docker呢?本文带你洞悉

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前专攻C/C、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL、蓝桥杯&am…

学习day49

computed和watch的区别 1.computed能完成的功能&#xff0c;watch都可以实现 2.watch能完成的&#xff0c;computed不一定能实现&#xff0c;例如&#xff1a;watch可以进行异步操作 两个重要的小原则 1.所被Vue管理的函数&#xff0c;最好写成普通函数&#xff0c;这样this的指…

90道渗透测试面试题(附答案)

2023年已经快过去一半了&#xff0c;不知道小伙伴们有没有找到自己心仪的工作呀。最近后台收到不少小伙伴说要我整理一些渗透测试的面试题&#xff0c;今天它来了&#xff01;觉得对你有帮助的话记得点个赞再走哦~ 1、什么是渗透测试&#xff1f; 渗透测试是一种评估计算机系统…