【Vue】三:Vue组件:props配置 父组件获取子组件

news2024/11/15 23:23:08

文章目录

  • 1.props配置
    • 1.1 方式一:简单的接收方式:直接采用数组接收
    • 1.2 方式二:添加类型限制
    • 1.3 方法三:添加类型限制,添加默认值,添加必要性
    • 1.4 不要修改props中的值
  • 2.从父组件获取子组件

1.props配置

父组件:
在这里插入图片描述
子组件:
在这里插入图片描述
在这里插入图片描述

1.1 方式一:简单的接收方式:直接采用数组接收

在这里插入图片描述

1.2 方式二:添加类型限制

在这里插入图片描述

1.3 方法三:添加类型限制,添加默认值,添加必要性

在这里插入图片描述
在这里插入图片描述

1.4 不要修改props中的值

如果要对props传过来的值稍作修改后展示,则可以定义一个新的变量,然后将props传过来的值赋给变量,修改变量的值,再将变量展示出去。

在这里插入图片描述

2.从父组件获取子组件

(1)在组件上使用 ref 属性进行标识
(2)在程序中使用$refs 来获取所有子组件
(3)在程序中使用$refs.标识 来获取某一个组件
在这里插入图片描述

在这里插入图片描述
ref 也可以使用在普通的 HTML 标签上,这样获取的就是这个 DOM 元素。

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

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

相关文章

Vulkan Tutorial 0 引言

1 开发环境 在这一章中,我们将设置您开发Vulkan应用程序的环境,并安装一些有用的库。除了编译器之外,我们将使用的所有工具都与Windows、Linux和MacOS兼容,但安装它们的步骤有些不同,这就是为什么它们在这里被单独描述…

MySQL所有基本操作详解

一.MySQL的基本操作 首先sql操作中的关键字的是大小写不敏感的,create 和CREATE是一样的。 1.库操作 1. 1查看数据库 show databases;show 和databases 之间有一个或者多个空格注意是databases而不是database结尾分号是英文形式,分号在SQL中是表示一…

爆肝3月斩获字节Java后端Offer,分享下我的面试复盘心得

前言 我背景是NUS计算机硕士,武汉理工EE本科,春招收获腾讯、字节等后端实习Offer,目前仍在字节实习,今天给大家分享一下面试准备经验,我认为也同样适用于大家日常的学习。 在开始分享之前,我想给大家抛出…

C语言 socket学习整理

分三个topic来熟悉C语言的socket使用方法。 一台client与一台server之间的双向TCP通讯。使用select接口实现的多台client与一台server之间的通讯。使用epoll接口实现的多台client与一台server之间的通讯。 TCP通信模型与UDP通信模型的区别 UDP通信模型中,在通信开…

uniapp-微信公众号静默授权

第一次开发公众号,以为静默授权非常的复杂,后面才发现静默授权本质上就是跳一个微信的内部链接,拿到code,通过code再去获取openid即可。 在网上找到了一个比较详细的教程进行了一些改造 首先跳转静默授权的地址: htt…

人体检测技术之TOF

人体检测技术之TOF 1.概述 智能人脸/视频锁领域的人体检测需求是要求远距离达到1m左右即可,一旦在此距离内检测人,则锁唤醒进行人脸识别,视频录制等操作。所以,人体检测技术非常关键。 选型主要是几个维度: 1.支持检测的距离范围,能否准确输出距离信息 2.支持检测FO…

100天涨薪4k!从功能测试到自动化测试,我整理的超全学习指南!

今年3月份,由于经济压力让我下定决心进阶自动化测试,已经24的我做了3年功能测试,坐标广州薪资定格在8k,可能是生活过的太安逸,觉得8000的工资也够了,但是生活总是多变的,女朋友的突然怀孕&#…

想让ChatGPT和低代码开发实现完美结合?看这篇文章就行!

关于ChatGPT ChatGPT,一款代表着目前人工智能最高水平的产物,自问世开始就饱受期待。这款由OpenAI所开发出来的大型语言模型,使用GPT-4技术来实现。其基于预训练数据集,可以进行自动聊天、自动生成各种文本等,被广泛应…

SpringBoot配置加载顺序

目录 前言一、Spring Boot 配置优先级二、命令行参数三、示例分析 前言 Spring Boot 不仅可以通过配置文件进行配置,还可以通过环境变量、命令行参数等多种形式进行配置。这些配置都可以让开发人员在不修改任何代码的前提下,直接将一套 Spring Boot 应用…

机器学习因子库及特征表达式,创业板布林带突破策略,年化13.3%(附代码)

原创文章第235篇,专注“个人成长与财富自由、世界运作的逻辑与投资"。 昨天有朋友留言说,L2R效果不好,当然我不知道这位兄弟的场景。 pybroker vs qlib pybroker的结构里,有一个特别的地方: 无论是规则型策略…

接口测试 —— 接口测试的意义

1、接口测试的意义(优势) (1)更早的发现问题: 不少的测试资料中强调,测试应该更早的介入到项目开发中,因为越早的发现bug,修复的成本越低。 然而功能测试必须要等到系统提供可测试…

GoogleTest之Matchers的用法

目录 组合匹配Matcher的类型转换重载函数的匹配基于参数执行不同的Actions多个参数作为一个整体匹配将Matchers作为谓词使用Matcher汇总 组合匹配 组合某些匹配某些值,可以使用以下: Matcher使用描述AllOf(m1, m2, …, mn)参数必须匹配m1, … mnAllOfA…

大数据:spark内核调度,DAG,job,宽窄依赖,stage阶段,内存计算管道,并行度task数量

大数据:spark内核调度 2022找工作是学历、能力和运气的超强结合体,遇到寒冬,大厂不招人,可能很多算法学生都得去找开发,测开 测开的话,你就得学数据库,sql,oracle,尤其s…

【测试开发】实训记录日志

软件测试系列文章目录 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 例如:第一章 了解测试开发和软件测试 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 …

建模杂谈系列226 流程与对象

说明 鲁迅说:我家门前门前有两棵树,一棵是枣树,另一棵也是枣树。 从编程语言的角度,可以分为两大类(面向过程或面向对象),可以参考这篇文章 文章的内容其实不多,我贴一下&#xff1…

spark入门 YARN模式(六)

一、背景 独立部署(Standalone)模式由 Spark 自身提供计算资源,无需其他框架提供资源。这 种方式降低了和其他第三方资源框架的耦合性,独立性非常强。但是你也要记住,Spark 主 要是计算框架,而不是资源调度…

CATIA软件各版本区别

之前有个朋友问catia v5r21和catia v5-6r 2011,有什么区别,是一样的吗? 众联亿诚才发现,很多朋友似乎看不懂CATIA各种版本各种型号,那么今天,众联亿诚就来详细解释一下,希望能帮助朋友们解答心…

苹果电脑磁盘诊断工具 SMART Utility for mac

SMART Utility for mac是一款Mac上磁盘诊断工具,能够自动检测磁盘的状态和错误情况,分析并提供错误报告,以直观的界面让用户可明确地知道自己的磁盘状况。SMART Utilitymac版支持普通硬盘HDD和固态硬盘SSD,能够显示出详细的磁盘信息&#xff…

版权中心改革之后,软著办理需要多少钱?

版权中心改革之后,软著办理需要多少钱? 众所周知版权中心2年改了3次,每次改革官费都会涨,最近一次是在4月份,官费涨了近一倍。 其实费用涨了还不算最坏的情况,主要是每次改革办理软著的难度都会增加很多。…

(antD)vue项目使用图标

(antD)vue项目使用图标 效果&#xff1a; <a-icon type"arrow-left" class"backBtn" v-if"cardDiv" click"backBtn" />.backBtn {color&#xff1a;#ccc;font-size: 20px;//图标大小 }