vue前端开发自学demo,父子组件之间传递数据demo2

vue前端开发自学demo,父子组件之间传递数据demo2!实际上,组件之间传递数据的,数据类型,是可以多种多样的,下面为大家展示几个常见的数据类型,比如数字类型,数组类型,对象类型。

代码如下所示:

<template>
    <h3>Parent</h3>
    <Child  title="Parents内容!222" :age="age" :names="names" :userInfo="userInfo"/>
</template>
<script>
import Child from "./Child.vue"
    export default{
        data(){
            return {
               age:38,
               names:["admin","guest",'tiger'],
               userInfo:{
                name:"Json",
                age:24
               }
            }
        },
        components:{
            Child
        }
    }
</script>

如图所示,以上代码就是,三种类型的,第一个年龄age,是数字类型。第二个名字的数组,第三个是一个用户信息的,对象类型。


如图,都可以正常获取到,在子组件里,可以正常获取到父组件传递过来的数据内容。

下一期内容给大家分享的是,Props传递数据的时候需要做校验,针对类型校验的内容。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

sublime中添加GBK编码模式

当写代码的中文注释时&#xff0c;编译代码出现如下错误&#xff1a; 解决办法&#xff0c;添加GBK模式&#xff1a; &#xff11;. 点击Preferences -> Package Control&#xff1a; 2. 在跳出来的搜索框里搜索conver, 点击ConverToUTF8 3. File左上角会多出GBK的选项 由…

PiflowX-DorisRead组件

DorisRead组件 组件说明 从Doris存储读取数据。 计算引擎 flink 有界性 目前Doris Source是有界流&#xff0c;不支持CDC方式读取。 组件分组 Doris 端口 Inport&#xff1a;默认端口 outport&#xff1a;默认端口 组件属性 名称展示名称默认值允许值是否必填描述…

【遇见Transformer】Transformer代码、原理全方位解析,相信我,看这一篇就够了!

目录 前言 预备知识 本章代码环境 关注我&#xff0c;不迷路 &#xff01; Transformer模型的结构​编辑 Transformer模型的基本原理 注意力机制 自注意力机制 两者的区别 多头注意力机制 Transformer模型的训练 Transformer模型的应用 论文地址 前言 预备知识 在…

学习python仅此一篇就够了(文件操作:读,写,追加)

python文件操作 文件编码 编码技术即&#xff1a;翻译的规则&#xff0c;记录了如何将内容翻译成二进制&#xff0c;以及如何将二进制翻译回可识别内容。 计算机中有许多可用编码&#xff1a; UTF-8 GBK BUG5 文件的读取操作 open&#xff08;&#xff09;函数 在pyth…

数据库锁表原因、排查、解决

一.场景 场景1场景2二.原因三.排查四.解决方案 一.场景 场景1 锁表通常发生在DML&#xff08; insert 、update 、delete &#xff09; A操作进行全量数据同步&#xff0c;对整个表的粒度进行上锁&#xff0c;导致B操作只能等待A操作完成才能进入插入数据。此时就出现了锁表…

【分布式技术】监控平台zabbix介绍与部署

目录 一、为什么要做监控&#xff1f; 二、zabbix是什么&#xff1f; 三、zabbix有哪些组件&#xff1f; ​编辑Zabbix 6.0 功能组件&#xff1a; ●Zabbix Server ●数据库 ●Web 界面 ●Zabbix Agent ●Zabbix Proxy ●Java Gateway 四、zabbix的工作原理&#xf…

test Property-based Testing-04-junit-quickcheck

拓展阅读 开源 Auto generate mock data for java test.(便于 Java 测试自动生成对象信息) 开源 Junit performance rely on junit5 and jdk8.(java 性能测试框架。性能测试。压测。测试报告生成。) junit-quickcheck&#xff1a;基于 JUnit 风格的属性驱动测试库 junit-qu…

对C语言的理解

1.计算机语言 就是我们人类与计算机进行交流的媒介。我们可以使用编程语言对计算机下达命令&#xff0c;从而让计算机完成我们所需要的功能。 语言 语法 逻辑 计算机语言有很多种。如&#xff1a;C 、C、Java、Go、JavaScript、Python&#xff0c;Scala等。 2.计算机语言简史…

Java基础之并发篇(二)

1、前言 本篇主要基于Java基础之并发篇&#xff08;一&#xff09;继续梳理java中关于并发相关的基础只是。本篇基于网络整理&#xff0c;和自己编辑。在不断的完善补充哦。 2、synchronized 的原理是什么? synchronized是 Java 内置的关键字&#xff0c;它提供了一种独占的…

Linux CentOS 7.6安装JDK详细保姆级教程

一、检查系统是否自带jdk java --version 如果有的话&#xff0c;找到对应的文件删除 第一步&#xff1a;先查看Linux自带的JDK有几个&#xff0c;用命令&#xff1a; rpm -qa | grep -i java第二步:删除JDK&#xff0c;执行命令&#xff1a; rpm -qa | grep -i java | xarg…

【AI的未来 - AI Agent系列】【MetaGPT】2. 实现自己的第一个Agent

在MetaGPT中定义的一个agent运行示例如下&#xff1a; 一个agent在启动后他会观察自己能获取到的信息&#xff0c;加入自己的记忆中下一步进行思考&#xff0c;决定下一步的行动&#xff0c;也就是从Action1&#xff0c;Action2&#xff0c;Action3中选择执行的Action决定行动…

时间序列数据的季节性检测

时间序列分析是统计学和数据科学的一个基本研究领域&#xff0c;它为理解和预测序列数据中的模式提供了一个强大的框架。特别是时间序列数据&#xff0c;它捕获连续时间间隔内的信息&#xff0c;使分析师能够揭示趋势&#xff0c;季节性模式和其他时间依赖性。在时间序列分析的…

Django教程第6章 | web开发实战-文件上传(导入文件、上传图片)

专栏系列&#xff1a;Django学习教程 导入文件 目标&#xff1a;导入部门清单excel&#xff0c;解析excel数据存储到数据库。 1.准备要导入的excel文件 2.编写模板HTML <div class"panel panel-default"><!-- Default panel contents --><div class…

第 7 章 排序算法

文章目录 7.1 排序算法的介绍7.3 算法的时间复杂度7.3.1 度量一个程序(算法)执行时间的两种方法7.3.2 时间频度7.3.3 时间复杂度7.3.4 常见的时间复杂度7.3.5 平均时间复杂度和最坏时间复杂度 7.4 算法的空间复杂度简介7.4.1 基本介绍 7.5 冒泡排序7.5.1 基本介绍7.5.2 演示冒泡…

Python——VScode安装

⼀、下载安装 [root192 ~]# rpm --import https://packages.microsoft.com/keys/microsoft.asc[root192 ~]# sh -c echo -e "[code]\nnameVisualStudio Code\nbaseurlhttps://packages.microsoft.com/yumrepos/vscode\nenabled1\ngpgcheck1\ngpgkeyhttps://packages.mi…

企业级大数据安全架构(三)修改集群节点hostname

作者&#xff1a;楼高 在后续安装FreeIPA的过程中&#xff0c;要求机器名必须包含完整的域名信息。如果之前在Ambari集群节点上的机器名不符合这个要求&#xff0c;可以按照以下步骤在Ambari上修改所有节点的机器名&#xff1a; 1.部署节点说明 本次测试是三台 ambari 节点&…

polar CTF CB链

一、题目 二、解答 1、通过jar包&#xff0c;可以看到/user路由下有反序列化操作 看到存在commons-beanutils依赖且版本为1.9.2&#xff0c;可利用CB链Getshell。 使用ysoserial项目中的CommonsBeanutils1链写一个POC&#xff0c;注意确保ysoserial项目中的pom.xml中的comm…

编程艺术之Unix哲学

Unix 哲学不算是一种正规设计方法&#xff0c;它并不打算从计算机科学的理论高度来产生理论上完美的软件。那些毫无动力、松松垮垮而且薪水微薄的程序员们&#xff0c;能在短短期限内&#xff0c;如神灵附体般开发出稳定而新颖的软件——这只不过是经理人永远的梦呓罢了。 1 Un…

[ACM题目练习] 前后手

题目1 A为了让数字总和最大&#xff0c;但是B想让数字总和最小。 题解 因为A先操作B后操作&#xff0c;所以B的策略一定是把当前剩下的数字中前1到 x 大的元素给乘上-1&#xff0c;那么A的策略是怎样的(通常这种题A没有策略&#xff0c;都是遍历所有的情况) (再接着优化&#…

如何基于 Gin 封装出属于自己 Web 框架?

思路 在基于 Gin 封装出属于自己的 Web 框架前&#xff0c;你需要先了解 Gin 的基本用法和设计理念。 然后&#xff0c;你可以通过以下步骤来封装自己的 Web 框架&#xff1a; 封装路由&#xff1a;Gin 的路由是通过 HTTP 方法和 URL 路径进行匹配的&#xff0c;你可以根据自己…