vue3中父组件与子组件的通信传值

父组件传值到子组件

所有的 props 都遵循着单向绑定原则,props 因父组件的更新而变化,自然地将新的状态向下流往子组件,而不会逆向传递。这避免了子组件意外修改父组件的状态的情况,不然应用的数据流将很容易变得混乱而难以理解,
另外,每次父组件更新后,所有的子组件中的 props 都会被更新到最新值,这意味着你不应该在子组件中去更改一个 prop。若你这么做了,Vue 会在控制台上向你抛出警告:

 父组件

<template><div><!-- <ChildModule mytitle="我是标题" aa="张三" bb="李四" v-bind="{ name: '王五', age: 19 }" ></ChildModule> --><!--也可以直接v-bind一个对象--><ChildModule mytitle="我是标题" aa="张三" bb="李四" v-bind="myuser"></ChildModule></div>
</template>
<script>
import ChildModule from "./components/ChildModule.vue" //导入ChildModule组件模板
export default {data() {return {myuser: {name: "钱七",age: 19}}},components: {ChildModule: ChildModule //注册局部子组件ChildModule:也可以写成ChildModule:ChildModule},methods: {}
}
</script>

子组件:用props 数组来接收参数

<template><div>{{ mytitle }}-- {{ aa }}-- {{ bb }}-- {{ name }}-- {{ age }}</div>
</template>
<script>
export default {// 用props 数组来接收props: ["mytitle", "aa", "bb", "name", "age"]
}
</script>

子组件:用props对象来接收参数

<template><div>{{ mytitle }}-- {{ aa }}-- {{ bb }}-- {{ name }}-- {{ age }}--{{ isShow ? "是" : "否" }}</div>
</template>
<script>
export default {// 用props 数组来接收// props: ["mytitle", "aa", "bb", "name", "age", "isShow"]props: {mytitle: String,aa: [String, Number], //表示此参数可以接收String和Number类型bb: { //还可以自定义校验参数required: true, //true 表示属性必传;false 表示可以不传属性;type: String, //表示属性只能是String类型的。也可以指定多个类型如type:[String,Number]default() {// 如果该参数没用值则指定一个默认值abc ;也可以直接default: "abc" return "abc"},//也可以写成:validator:value=>['success','warning','danger','error'].indexOf(value)>-1validator(val) {//检查参数的值是否是"success"或者"warning"或者"danger"或者"error",如果是则返回true,不是则返回false               return ["success", "warning", "danger", "error"].includes(val)}},name: String,age: Number,isShow: Boolean}
}
</script>

下面列举了所有可能的数据类型 

export default {props: {propA : String,  //字符串类型propB : Number,  //数字类型propC : Boolean, //布尔值类型propD : Array,  //数组类型propE : Object, //对象类型propF : Date,  //日期类型propG: Function, //函数类型propH: Symbol, //符号类型}
}

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

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

相关文章

【ARM裸机】ARM入门

1.ARM成长史 2.ARM的商业模式和生态系统 ARM只设计CPU&#xff0c;但是不生产CPU 3.为什么使用三星&#xff1a;S5PV210 4.各种版本号 0. ARM和Cortex Cortex就是ARM公司一个系列处理器的名称。比如英特尔旗下处理器有酷睿&#xff0c;奔腾&#xff0c;赛扬。ARM在最初的处理器…

P1950 长方形

题目&#xff1a; P1950 长方形 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 算法&#xff1a; dp动态规划 代码&#xff1a; #include<iostream> #include<string> typedef unsigned long long ull; const int N 1010; using namespace std;int r, c, i, …

python 编写多输入参数的小工具,并根据输入参数个数的不同执行不同方法

import argparsedef method1(input1, input2):print(执行方法1&#xff0c;输入参数1:, input1)print(执行方法1&#xff0c;输入参数2:, input2)def method2(input1, input2, input3):print(执行方法2&#xff0c;输入参数1:, input1)print(执行方法2&#xff0c;输入参数2:, …

打印新闻标题,使用封装get、set方法,打印前15个字符串

package day21; import java.util.ArrayList; import java.util.Collections;/*** author monian* Wo yi wu ta,wei shou shu er!*/ public class Homework01 {SuppressWarnings({"all"})public static void main(String[] args) {News news1 new News("新冠确…

【python】屈小原现在要为学校写校庆贺文(CTGU百年校庆)

题目&#xff1a; """ 题目描述&#xff1a; 屈小原需要为学校的校庆写一篇贺文&#xff0c;共需写下n个字&#xff0c;但他目前只完成了1个字。屈小原可以进行两种操作&#xff1a; 在文档的末尾添加一个字&#xff0c;这样字数就会变为x1。 写下与当前字数相同…

6.5 Elasticsearch(五)Spring Data Elasticsearch - 增删改查API

文章目录 1.Spring Data Elasticsearch2.案例准备2.1 在 Elasticsearch 中创建 students 索引2.2 案例测试说明 3.创建项目3.1 新建工程3.2 新建 springboot module&#xff0c;添加 spring data elasticsearch 依赖3.3 pom.xml 文件3.4 application.yml 配置 4.Student 实体类…

在 Python 中使用 Pillow 进行图像处理【2/4】

第二部分 一、说明 该文是《在 Python 中使用 Pillow 进行图像处理》的第二部分&#xff0c;主要介绍pil库进行一般性处理&#xff1a;如&#xff1a;图像卷积、钝化、锐化、阈值分割。 二、在 Python 中使用 Pillow 进行图像处理 您已经学习了如何裁剪和旋转图像、调整图像大…

华为OD 玩牌高手(100分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…

字号和磅的对应关系

字号「八号」对应磅值5 字号「七号」对应磅值5.5 字号「小六」对应磅值6.5 字号「六号」对应磅值7.5 字号「小五」对应磅值9 字号「五号」对应磅值10.5 字号「小四」对应磅值12 字号「四号」对应磅值14 字号「小三」对应磅值15 字号「三号」对应磅值16 字号「小二」对应磅值18 …

XMLHttpRequest对象的Get请求和Post请求的用法

XMLHttpRequest对象的Get请求和Post请求的用法 Get请求提交数据 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>发送ajax get请求</title> </head> <body> <script type"…

机器学习终极指南:统计和统计建模03/3 — 第 -3 部分

系列上文&#xff1a;机器学习终极指南&#xff1a;特征工程&#xff08;02/2&#xff09; — 第 -2 部分 一、说明 在终极机器学习指南的第三部分中&#xff0c;我们将了解统计建模的基础知识以及如何在 Python 中实现它们&#xff0c;Python 是一种广泛用于数据分析和科学计…

Spring Security认证架构介绍

在之前的Spring Security&#xff1a;总体架构中&#xff0c;我们讲到Spring Security整个架构是通过Bean容器和Servlet容器对过滤器的支持来实现的。我们将从过滤器出发介绍Spring Security的Servlet类型的认证架构。 1.AbstractAuthenticationProcessingFilter AbstractAut…

SpringSecurity源码学习五:跨域与跨站请求伪造

目录 什么是跨域springboot是怎么解决跨域问题在springSecurity中怎么解决跨域问题CORS源码跨域请求伪造CSRFCSRF源码总结 什么是跨域 跨域是指在网络中&#xff0c;当一个网页的资源&#xff08;如字体、脚本或样式表&#xff09;尝试从不同的域名、端口或协议请求数据时&…

HOT100自查题集

前言 遗忘是人类的本能&#xff0c;经常自查是必不可少的。现在面试手撕已经是必备项目&#xff0c;手撕题目大部分来自于力扣 HOT100 以及对应方向的一些编码题。我对 HOT 100 的题目以及Java相关的一些编码题目进行了分类整理&#xff0c;并提供解题思路&#xff0c;用作复习…

Git的介绍和命令汇总

目录 一、git介绍 1、git的工作区域 2、git中文件的四种状态 二、常用命令 1、基础命令 2、提交类命令 3、删除类命令 4、分支类相关命令 5、 查看类相关命令 6、撤销类命令 一、git介绍 1、git的工作区域 在Git中&#xff0c;有四个工作区域&#xff1a;工作区域&am…

ubuntu20.4 执行sudo apt-get update出现错误 libnettle.so.6 动态链接库错误

一、错误描述 sudo apt-get update 报错提示 libnettle.so.6 动态链接库错误 $ sudo apt update /usr/lib/apt/methods/https: error while loading shared libraries: libnettle.so.6: cannot open shared object file: No such file or directory /usr/lib/apt/methods/ht…

【计算机网络】(面试问题)路由器与交换机的比较

路由器与交换机比较 内容主要参考总结自《计算机网络自顶向下第七版》P315 两者均为存储-转发设备: 路由器: 网络层设备 (检测网络层分组首部) 交换机: 链路层设备 (检测链路层帧的首部) 二者均使用转发表: 路由器: 利用路由算法(路由协议)计算(设置), 依据IP地址 交换机…

CorelDRAW Graphics Suite2024完整版最新功能介绍

CorelDRAW平面设计软件通常也被叫做CDR&#xff0c;CDR广泛应用于排版印刷、矢量图形编辑及网页设计等领域。通过CorelDRAW体验极具个性的自由创作&#xff0c;大胆展现真我&#xff0c;交付出众的创意作品。CorelDRAW拥有矢量插图、页面布局、图片编辑和设计工具&#xff0c;无…

迅为RK3568开发板RTMP推流之视频监控

1 搭建 RTMP 媒流体服务器 nginx-rtmp 是一个基于 nginx 的 RTMP 服务模块&#xff0c;是一个功能强大的流媒体服务器模块&#xff0c; 它提供了丰富的功能和灵活的配置选项&#xff0c;适用于构建各种规模的流媒体平台和应用。无论是搭建实时视频直播平台、点播系统或多屏互…

深、浅拷贝之间的关系

深、浅拷贝之间的关系 什么是赋值 赋值是将某一数值或对象赋给某个变量的过程&#xff0c;分为下面 2 部分 基本数据类型&#xff1a;赋值&#xff0c;赋值之后两个变量互不影响引用数据类型&#xff1a;赋址&#xff0c;两个变量具有相同的引用&#xff0c;指向同一个对象&…