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,一经查实,立即删除!

相关文章

pytest钩子函数(一):引导钩子和调试钩子

前言 pytest这个框架提供了非常多的钩子。通过这些钩子我们可以对pytest 用例收集、用例执行、报告输出等各个阶段进行干预&#xff0c;根据需求去开发对应的插件&#xff0c;以满足自己的使用场景。 01 什么是钩子函数&#xff1f; 钩子函数在pytest称之为Hook函数,它pytes…

【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…

使用“OpenCV函数”和“ORB-SLAM2源码中的ExtractORB()函数”提取ORB特征点

#include "ORB/global_defination/global_defination.h" // 导入ORB的全局定义 #include "ORB/ORBFeature.hpp" // 导入ORB特征相关的头文件using namespace ORB; // 使用ORB命名空间int main(int argc, char** argv) {google::InitGoogleLogging(argv[…

Zookeeper的基本概念以及安装

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

SpringCloud使用log4j日志框架教程

前言 上一篇文章我们介绍了《SpringCloud使用logback日志框架教程》&#xff0c;本文我们再来介绍下log4j2。 Log4j2是一款流行的Java日志框架&#xff0c;它提供了高度可配置的日志记录功能&#xff0c;支持多种不同的输出格式和目标&#xff0c;比如文件、控制台、数据库等…

多肽试剂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;使…

[SQL挖掘机] - GROUP BY语句

介绍: group by 是 sql 中用于对结果集进行分组的关键字。通过使用 group by&#xff0c;可以根据一个或多个列的值将结果集中的行分组&#xff0c;并对每个分组应用某种聚合函数&#xff08;如 count、sum、avg 等&#xff09;以生成汇总信息。这样可以方便地对数据进行分类、…

xml命名空间

xml命名空间 一个xml文档中可以包含多个元素和属性&#xff0c;在文档中使用多个DTD文件时&#xff0c;可能会碰到相同的元素&#xff0c;而这些名称相同的元素可能代表了完全不同的含义&#xff0c;为了防止命名冲突&#xff0c;W3C提供了一个推荐标准-XML命名空间 命名空间有…

题目:2099.找出和最大的长度为 k 的子序列

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2099. 找到和最大的长度为 K 的子序列 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 首先新建一个 nums.length 维数据&#xff0c;每一维的长度为 2&#xff0c;然后将 nums 数组中元素放…

轮播图添加删除

轮播图页面和对话框搭建 页面简单布局 <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;、启动…

golang log标准库

不喜饶过 源码部分 type Logger struct {mu sync.Mutex // ensures atomic writes; protects the following fieldsprefix string // prefix on each line to identify the logger (but see Lmsgprefix)flag int // propertiesout io.Wri…

29-使用RocketMQ做削峰处理

1、初识RocketMQ 1.1、Apache 下载RocketMQ https://downloads.apache.org/rocketmq/ 1.2、RocketMQ官方网站 https://rocketmq.apache.org/zh/ 1.3、RocketMQ在GitHub文档 https://github.com/alibaba/spring-cloud-alibaba/wiki/RocketMQ 1.4、RocketMQ官方网站文档 …

ZGC垃圾收集器-JVM(十五)

上篇文章说了G1的特性&#xff0c;无分代&#xff0c;复制算法&#xff0c;大内存就可以用G1&#xff0c;可预测stw时间等特性。 G1垃圾收集分类-JVM&#xff08;十四&#xff09; ZGC收集器 -XX:UseZGC ZGC&#xff08;Z Garbage Collector&#xff09;是在jdk11新加入的低…

42. 接雨水

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

迁移学习的使用

network resnet34(pretrainedTrue) self.x nn.Sequential(*list(network.children())[4:5]) for name, layer in self.x.named_children(): layer[0].conv1nn.Conv2d(64, 128, kernel_size3, stride 2, padding 1, biasFalse) # 获取模型的参数字典network.conv1 nn.Conv2d(…