Vue-props配置功能

Vue-props配置功能

props概述

  • 功能:接收从其他组件传过来的数据,将数据从静态转为动态
  • 注意:
    • 同一层组件不能使用props,必须是父组件传子组件的形式。父组件传数据,子组件接收数据。
    • 不能什么数据都接收,可能会出现一些奇怪的bug
    • props接收过来的数据不要修改,页面渲染可能没有问题,但控制台会报错,而且不符合规范
      在这里插入图片描述

props的三种接收方法:

  • 第一种:数组形式(常用)
props:['a', 'b']
  • 第二种:类型限制
props : { a : String b : Number 
}
  • 第三种:类型限制,必要性限制,默认值
props : { a : {// type:类型(可以是数字,字符串等)type : Number, // required:true 或者 false// 设置为true视为a必须存在(必填项),没有a则控制台报错// 默认情况为false required : true }, b : { type : Number, // default:默认值// 在添加默认值之前该字段接收的数据已经有数值时,则默认值无效default : 10 }
}

传数据的形式(传数据的形式可对应任意一种接受数据的方法):

  • 在标签内传数据
// 父组件
<Info name="张三" :age="12"></Info>// 子组件
props : ['name', 'age']
  • 在data(){}中传数据
// 父组件
<Info :list="list"></Info>
data() {return {list : [{id:'001', name:'zhangsan', age:'10'},{id:'002', name:'lisi', age:'20'}]}
}// 子组件
props : ['list']
  • 在methods : {}中传数据
// 父组件
<Info :list="list"></Info>
method : {list(){......}
}// 子组件
props : ['list']
  • 注:传数据的形式有很多,不局限以上用法,也可以在computed : {}中传数据等

怎么用?

  • 父组件传数据,子组件接收数据
  • 父组件App.vue
<template><div><h1>{{msg}}</h1>// 当出现第二 或 第三种带有限定类型的props时,要注意接受的数据是否符合类型限制// 不符合类型限制,但又不想修改类型,例如:age="12",可采用v-bind:// v-bind:简写形式 => ':',等号后面可以是常量或字符串等<Info name="张三" :age="12"></Info></div>
</template><script>import Info from './components/Info.vue'export default {name : 'App',data() {return {msg : '个人信息'}},components : {Info}}
</script>
  • 子组件Info.vue
<template><div><h3>姓名:{{name}}</h3><h3>年龄:{{age}}</h3></div>
</template><script>
export default {name : 'Info',data() {return {name: this.name}},// 数组形式(常用)props : ['name','age']// 带有类型限定props : { name : String age : Number }// 类型限制,必要性限制,默认值props : { name : {type : Number, required : true },age : { type : Number, default : 10 }}
}
</script>type : Number, required : true },age : { type : Number, default : 10 }}
}
</script>

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

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

相关文章

【LeetCode】29. 两数相除

1 问题 给你两个整数&#xff0c;被除数 dividend 和除数 divisor。将两数相除&#xff0c;要求 不使用 乘法、除法和取余运算。 整数除法应该向零截断&#xff0c;也就是截去&#xff08;truncate&#xff09;其小数部分。例如&#xff0c;8.345 将被截断为 8 &#xff0c;-…

新增Node.js运行环境、新增系统缓存清理功能,1Panel开源面板v1.7.0发布

2023年10月16日&#xff0c;现代化、开源的Linux服务器运维管理面板1Panel正式发布v1.7.0版本。 在这个版本中&#xff0c;1Panel新增Node.js运行环境&#xff1b;新增系统缓存清理功能&#xff1b;应用安装时支持选择远程数据库。此外&#xff0c;我们进行了40多项功能更新和…

竞赛 深度学习OCR中文识别 - opencv python

文章目录 0 前言1 课题背景2 实现效果3 文本区域检测网络-CTPN4 文本识别网络-CRNN5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习OCR中文识别系统 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;…

易天光通信推出100G BIDI ER光模块最新解决方案

随着数字信息时代的快速发展&#xff0c;网络通信技术的迅猛进步成为推动科技创新和产业升级的重要引擎之一。作为光通信行业的新秀&#xff0c;近期易天光通信推出了全新的100G BIDI ER1 Lite光模块和100G BIDI LR1 Lite光模块&#xff0c;助力崭新的未来网络建设。 易天光通…

C#网络爬虫实例:使用RestSharp获取Reddit首页的JSON数据并解析

Reddit 是一个非常受欢迎的分享社交新闻聚合网站&#xff0c;用户可以在上面发布和内容。我们的目标是抓取 Reddit 首页的数据 JSON&#xff0c;以便进一步分析和使用。 C#技术概述&#xff1a;C#是一种流行的编程语言&#xff0c;它具有流畅流畅的特点&#xff0c;非常适合开发…

centos7安装erlang23.3.4.11及rabbitmq3.9.16版本

rpm包有系统版本要求&#xff0c;el是Red Hat Enterprise Linux(EL)的缩写。 EL7是Red Hat 7.x&#xff0c;Centos 7.x EL8是Red Hat 8.x, Centos 8.x 所以我们在安装erlang及rabbitmq时需要选择与自己的服务器相对应的rpm包 # rabbitmq的rpm安装包 https://github.com/rabbi…

基于 Debian 稳定分支发行版的Zephix 7 发布

导读Zephix 是一个基于 Debian 稳定版的实时 Linux 操作系统。它可以完全从可移动媒介上运行&#xff0c;而不触及用户系统磁盘上存储的任何文件。 Zephix 是一个基于 Debian 稳定版的实时 Linux 操作系统。它可以完全从可移动媒介上运行&#xff0c;而不触及用户系统磁盘上存…

DDoS攻击与CC攻击:网络安全的两大挑战

在今天的数字时代&#xff0c;网络安全问题越来越突出&#xff0c;其中分布式拒绝服务攻击&#xff08;DDoS攻击&#xff09;和HTTP洪泛攻击&#xff08;CC攻击&#xff09;是两种常见的网络威胁。本文将探讨这两种攻击的概念、原理以及如何有效地应对它们。 1. DDoS攻击&…

【计算机毕设选题推荐】幼儿园管理系统SpringBoot+SSM+Vue

前言&#xff1a;我是IT源码社&#xff0c;从事计算机开发行业数年&#xff0c;专注Java领域&#xff0c;专业提供程序设计开发、源码分享、技术指导讲解、定制和毕业设计服务 项目名 基于SpringBoot的幼儿园管理系统 技术栈 SpringBootSSMVueMySQLMaven 文章目录 一、幼儿园管…

【Docker 内核详解】namespace 资源隔离(四):Mount namespace Network namespace

【Docker 内核详解 - namespace 资源隔离】系列包含&#xff1a; namespace 资源隔离&#xff08;一&#xff09;&#xff1a;进行 namespace API 操作的 4 种方式namespace 资源隔离&#xff08;二&#xff09;&#xff1a;UTS namespace & IPC namespacenamespace 资源隔…

python中使用xml.dom.minidom模块读取解析xml文件

python中可以使用xml.dom.minidom模块读取解析xml文件 xml.dom.minidom模块应该是内置模块不用下载安装 对于一个xml文件来说比如这个xml文件的内容为如下 <excel version"1.0" author"huangzhihui"><table id"1"><colum id&qu…

第四节(1):EXCEL中判断一个WORD文件是否被打开

《VBA信息获取与处理》教程(10178984)是我推出第六套教程&#xff0c;目前已经是第一版修订了。这套教程定位于最高级&#xff0c;是学完初级&#xff0c;中级后的教程。这部教程给大家讲解的内容有&#xff1a;跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网…

shell命令以及运行原理

Linux严格意义上说的是一个操作系统&#xff0c;我们称之为“核心&#xff08;kernel&#xff09;“ &#xff0c;但我们一般用户&#xff0c;不能直接使用kernel。 而是通过kernel的“外壳”程序&#xff0c;也就是所谓的shell&#xff0c;来与kernel沟通。如何理解&a…

ESP32-IPS彩屏ST7789-Arduino-简单驱动

目的&#xff1a; 使ESP32能够驱动点亮ST7789显示屏 前提条件&#xff1a; ESP32 ST7789 &#xff08;240 x240&#xff0c;IPS&#xff09; 杜邦线 Arduino 过程&#xff1a; 0x00--接线 0x01--驱动&#xff1a; 彩屏驱动库 针对不同的彩屏驱动芯片&#xff0c;常用的 Arduino…

Go实现CORS(跨域)

引言 很多时候&#xff0c;需要允许Web应用程序在不同域之间&#xff08;跨域&#xff09;实现共享资源。本文将简介跨域、CORS的概念&#xff0c;以及如何在Golang中如何实现CORS。 什么是跨域 如果两个 URL 的协议、端口&#xff08;如果有指定的话&#xff09;和主机都相…

Linux性能优化--实用工具:性能工具助手

8.0 概述 本章介绍一些在Linux系统上可用的实用程序&#xff0c;它们能够加强性能工具的有效性和可用性。实用工具本身不是性能工具&#xff0c;但是当它们与性能工具一起使用时&#xff0c;它们可以帮助完成如下功能&#xff1a;自动执行繁琐的任务、分析性能统计数据&#x…

二叉树的三种遍历方式的本质

二叉树的定义就不在这里多说了&#xff0c;下面这个图就是一个简单的二叉树&#xff1a; 二叉树的三种遍历方式&#xff1a; 前序遍历&#xff1a;头左右&#xff0c;也就是先头后左再右&#xff1a;1245367 public static void prePrint(BinaryTreeNode root) {if (root ! n…

6.strchr函数和strrchr函数

#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <string.h>/*char *strchr(char const *str, int ch);strchr在字符串中str中查找字符ch第1次出现的位置&#xff0c;找到后函数返回一个指向该位置的指针&#xff1b;如果该字符并不存在于字符串中&a…

EFLK与logstash过滤

目录 一、Filebeat工作原理&#xff1a; 二、为什么要使用Filebeat&#xff1a; 三、Filebeat和Logstash的区别&#xff1a; 四、logstash 的过滤插件&#xff1a; 五、FilebeatELK 部署&#xff1a; 1. 安装filebeat&#xff1a; 2. 设置 filebeat 的主配置文件&#xff1…

RIAC-V架构开发——ecall函数调用分析

1、sbi_ecall函数功能 &#xff08;1&#xff09;sbi_ecall函数是内核调用SBI的接口&#xff0c;在RISC-V架构中定义了SBI规范&#xff0c;内核通过ecall指令来调用SBI接口进而操作硬件&#xff1b; &#xff08;2&#xff09;SBI规范参考官网文档《riscv-sbi.pdf》&#xff1b…