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

news2024/12/23 22:21:55

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传递数据的时候需要做校验,针对类型校验的内容。

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

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

相关文章

网上流量卡的硬核知识(二),让我们一口气了解

越来越多的关注小编平台的小伙伴问我&#xff0c;流量卡容易注销吗&#xff1f;为什么第一次在网上办的卡需要专属首充&#xff1f;我今天一次性给大家详细的讲明白&#xff0c;让大家再无后顾之忧&#xff0c;好好的过个年。 工信部要求2019年1月1日起在全国正式提供手机卡异地…

el-select 单选时,选择后输入框的is-focus状态并没有取消

前两天在封装组件的时候&#xff0c;发现el-select 单选时&#xff0c;选择后输入框的is-focus状态并没有取消&#xff0c;需要手动点其它地方才会取消&#xff0c;于是想着找找为什么 一、通过调试源码发现&#xff0c;输入框在点击选项后触发blur&#xff0c;紧接着又触发了…

Android SDK环境搭建[图解]; 解决问题Done. Nothing was installed.

安装SDK Android SDK环境搭建 依赖java环境,需要自备Java环境 (100%实操成功) 目录 1. 解压&#xff1a;解压到非中文无特殊字符的目录 2. 双击&#xff1a;SDK Manager.exe&#xff0c;不要选全部!不要选全部!不要选全部!(会下很久) 3. 然后勾选组件​ 4. 设置环境变量 …

linux内核调试之魔术键sysrq

linux内核调试之魔术键sysrq 1 sysrq简介 sysrq是内核提供的一组魔数组合键&#xff0c;通过该组合键可以直接触发内核的特定功能&#xff0c;如重启系统&#xff0c;设置loglevel等。在内核发生故障时&#xff0c;只要键盘还有响应就可以使用它们触发相应操作。 除了通过键…

ubuntu20.04 扩大交换空间swap

检查当前swap情况 free -msudo swapon --show关闭现有的swap sudo swapoff -a创建一个新的swap文件 sudo fallocate -l 32G /swapfile设定正确的权限 sudo chmod 600 /swapfile下面这个指令会把我们的空间变成可用的swap空间 sudo mkswap /swapfile启用swap文件 sudo swa…

base64 图片进行编码、解码;api调用

1、base64 图片进行编码、解码 编码 import base64# 假设您有一个图像文件&#xff0c;例如 image.jpg with open(r"C:\Users\l****1686722996428308480-1 (1).jpg", rb) as image_file:# 读取图像文件的二进制数据image_data image_file.read()# 将二进制数据编码…

从网页连接socket服务器和I/O

1.i/o InputStream和InputStreamReader是Java I/O类库中的两个关键类&#xff0c;用于处理字节流。它们的主要区别在于它们处理数据的方式。 InputStream: InputStream是用于读取字节流的抽象类。它是所有字节输入流类的父类。InputStream的子类可以从不同的数据源读取字节&…

如何在群辉NAS使用Docker搭建容器魔方并实现无公网ip远程访问

文章目录 1. 拉取容器魔方镜像2. 运行容器魔方3. 本地访问容器魔方4. 群辉安装Cpolar5. 配置容器魔方远程地址6. 远程访问测试7. 固定公网地址 本文主要介绍如何在群辉7.2版本中使用Docker安装容器魔方&#xff0c;并结合Cpolar内网穿透工具实现远程访问本地网心云容器魔方界面…

了解Python中的requests.Session对象及其用途

前言 在Python的网络编程中&#xff0c;requests库是一个非常流行的HTTP客户端库&#xff0c;用于发送各种类型的HTTP请求。在requests库中&#xff0c;requests.Session对象提供了一种在多个请求之间保持状态的方法本文将探讨Python中的requests.Session对象及其用途&#xf…

期末查分系统(c,链表实现)

主要功能&#xff1a; 分为三个身份: 学生:可以通过学号查询个人分数 老师&#xff1a;可以看所有学生成绩&#xff0c;单科排名&#xff08;正序&#xff0c;倒序&#xff09;&#xff0c;统计绩点&#xff0c;查看绩点排名前百分之n的学生 管理员端&#xff1a;可以创建链…

研发型企业怎样选择安全便捷的数据摆渡解决方案?

研发型企业在市场经济发展中发挥着至关重要的作用&#xff0c;研发型企业是指以科技创新为核心&#xff0c;以研发新产品、新技术、新工艺为主要业务的企业。这类企业注重技术创新和研发&#xff0c;持续不断地进行技术创新和产品升级&#xff0c;为经济发展注入新鲜的活力。 研…

element-plus里el-date-picker日期选择器,默认值不显示的问题

官网文档给出的示例默认值也是没有没显示的。 找了很多方法&#xff0c;最终是给v-model"defaultTime"绑定初始值&#xff0c;如下代码&#xff0c;需要的可以改一下 <el-date-picker class"top_select" v-model"defaultTime" type"da…

C语言督学营(高级阶段)

文章目录 高级阶段19.C语言语法进阶1.条件运算符、逗号运算符(1)条件运算符 / 三目运算符   ? :(2)逗号运算符   , 2.自增自减运算符3.位运算符&#xff1a;按位或、按位异或、按位取反(1)逻辑与、按位与、左移、右移(2)有符号数右移 vs 无符号数右移(3)按位与、按位或、按位…

微信小程序Burp抓包

方法有很多&#xff0c;工具也各有差异&#xff0c;主要是学代理流量的思路 Burp流量代理工具小程序 一、Burp证书导入 1、开启代理 开启浏览器的代理&#xff0c;火狐推荐FoxyProxy&#xff0c;Google推荐SwitchyOmega&#xff0c;设置代理为127.0.0.1:8080。 2、下载证书…

STM32Cubemx PWM驱动SG90舵机

一、SG90相关介绍 名 称&#xff1a;9克舵机 180度 尺 寸&#xff1a;23mmX12.2mmX29mm 重 量&#xff1a;9克 扭 矩&#xff1a;1.5kg/cm 工 作 电 压: 4.2-6V 温 度 范 围:0℃--55℃ 运 行 速 度&#xff1a;0.3秒/60度 死 带 宽:10微秒 二、Cubemx配置 sys配置 RCC配置 LED…

CloudCone | 最便宜国外VPS | 2核1G一年只需17$ | 国外性价比高VPS | CloudCone 怎么样 | CloudCone 使用体验

因工作需要&#xff0c;博主体验过市面上各家国外vps&#xff08;包括你知道的搬瓦工、vultr、hostwinds等等&#xff09;&#xff0c;把最便宜的一家国外vps记录下来&#xff0c;市面上找不到比这更便宜的vps。 它就是CloudCone。这家vps比较小众&#xff0c;ip新&#xff0c…

红队打靶练习:TOMMY BOY: 1

目录 信息收集 1、arp 2、nmap 3、nikto 4、whatweb WEB robots.txt get flag1 get flag2 FTP登录 文件下载 更改代理 ffuf爆破 get flag3 crunch密码生成 wpscan 1、密码爆破 2、登录wordpress ssh登录 get flag4 信息收集 get flag5 信息收集 1、arp …

Golang的API项目快速开始

开启一个简单的API服务。 golang的教程网上一大堆&#xff0c;官网也有非常详细的教程&#xff0c;这里不在赘述这些基础语法教程&#xff0c;我们意在快速进入项目开发阶段。 golang好用语法教程传送门&#xff1a; m.runoob.com/go/ 编写第一个API 前提&#xff1a;按照上一…

2023年全国职业院校技能大赛(高职组)“云计算应用”赛项赛卷⑨

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷9 目录 需要竞赛软件包环境以及备赛资源可私信博主&#xff01;&#xff01;&#xff01; 2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷9 模块一 …

视频壁纸制作Dynamic Wallpaper中文

Dynamic Wallpaper是一款专门为macOS用户设计的动态壁纸软件。它可以将视频、图片、音乐等多种元素融合在一起&#xff0c;为用户的桌面带来生动、个性化的视觉效果。Dynamic Wallpaper内置了大量动态壁纸&#xff0c;包括自然风景、城市风貌、抽象艺术等多种主题。用户可以根据…