第二十四课 Vue中子组件调用父组件数据
Vue中子组件调用父组件数据
Vue是不建议在不同的组件直接传递值的,我们需要使用props方法来进行组件间的值传递
子组件调用父组件数据
父模板的数据,子组件是无法直接调用的
无法直接调用
1)组件调用顶级对象中的data
<div class="vue"><per></per></div><script>new Vue({el: '.vue',data: {vals: 'Hello World !'},components: {'per': {template: '<span>嵌套组件父 {{vals}}</span>',}}}); </script>
2)子组件中调用父组件的数据
无法直接调用
<div class="vue"><per></per></div><script>new Vue({el: '.vue',components: {'per': {data: function(){return {vals: "我是父组件中的数据"}},template: '<span>嵌套组件父 {{vals}} : <son></son></span>',components: { //嵌套子组件的根为 a'son': {template: '<strong>嵌套子组件</strong>'} }}}}); </script>
props接受数据
props类似于为子组件定义了属性名,用于接受父组件传递进来的值,通过v-bind将定义好的属性并绑定到子组件实例上进行参数绑定。
1)子组件接受父组件的传值
<script>new Vue({el: '#app',components: {per: {data: () => ({val: 'Hello World !'}),template: `<div><h1>这是父组件的内容 {{val}}</h1><son :getVal="val"></son></div>`,components: {son: {props: ['getVal'],template: '<h1>这是子组件的内容 {{getVal}}</h1>'}} }}})</script>
2)子组件介绍父组件的多值传递
props对应的数组对象,可以接受多值传递
<div id="app"><per></per> </div><script>new Vue({el: '#app',components: {per: {data: () => ({val: 'Hello World !',nums: 1000}),template: `<div><h1>这是父组件的内容 {{val}}</h1><son :getVal="val" :getMore="nums"></son></div>`,components: {son: {props: ['getVal', 'getMore'],template: '<h1>这是子组件的内容 {{getVal}} {{getMore}}</h1>'}} }}})</script>
props数据过滤
props后的属性也可以是obj格式的对象,方便针对接受的参数进行过滤操作
1)字符过滤(接受的值是否为字符)
<div id="app"><per></per> </div><script>new Vue({el: '#app',components: {per: {data: () => ({val: 'Hello World !'}),template: `<div><h1>这是父组件的内容 {{val}}</h1><son :getVal="val"></son></div>`,components: {son: {props: {'getVal': [String]},template: '<h1>这是子组件的内容 {{getVal}}</h1>'}} }}})</script>
2)多数据类型过滤
当前传递进来的数据,只允许是数值或者字符
<div id="app"><per></per> </div><script>new Vue({el: '#app',components: {per: {data: () => ({val: 'Hello World !'}),template: `<div><h1>这是父组件的内容 {{val}}</h1><son :getVal="val"></son></div>`,components: {son: {props: {'getVal': [String, Number]},template: '<h1>这是子组件的内容 {{getVal}}</h1>'}} }}})</script>
3)多种过滤方式
a)为当前空值传递赋默认值
b)类型检测
c)自定义验证函数
官方示例:
Vue.component('example', {props: {// 基础类型检测 (`null` 意思是任何类型都可以)propA: Number,// 多种类型propB: [String, Number],// 必传且是字符串propC: {type: String,required: true},// 数字,有默认值propD: {type: Number,default: 100},// 数组/对象的默认值应当由一个工厂函数返回propE: {type: Object,default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {return value > 10}}}
})
相关文章:
第二十四课 Vue中子组件调用父组件数据
Vue中子组件调用父组件数据 Vue是不建议在不同的组件直接传递值的,我们需要使用props方法来进行组件间的值传递 子组件调用父组件数据 父模板的数据,子组件是无法直接调用的 无法直接调用 1)组件调用顶级对象中的data <div class&quo…...
Jenkins-pipeline语法说明
一. 简述: Jenkins Pipeline 是一种持续集成和持续交付(CI/CD)工具,它允许用户通过代码定义构建、测试和部署流程。 二. 关于jenkinsfile: 1. Sections部分: Pipeline里的Sections通常包含一个或多个Direc…...
小米Vela操作系统开源:AIoT时代的全新引擎
小米近日正式开源了其物联网嵌入式软件平台——Vela操作系统,并将其命名为OpenVela。这一举动在AIoT(人工智能物联网)领域掀起了不小的波澜,也为开发者们提供了一个强大的AI代码生成器和开发平台。OpenVela项目源代码已托管至GitH…...
NodeJs如何做API接口单元测试? --【elpis全栈项目】
NodeJs API接口单元测试 api单元测试需要用到的 assert:断言库 (还要一些断言库比如:Chai)supertest: 模拟http请求 简单的例子: const express require(express); const supertest require(supertest); const assert require(assert);…...
bundletool来特定设备规范的json安装aab包
1、获取自己设备的设备规范json java -jar ./bundletool.jar get-device-spec --outputj:/device-spec.json 2、根据设备规范生成apks包 java -jar ./bundletool.jar build-apks --device-specj:/device-spec.json --bundleapp-dev-release.aab --output随便的文件名.apks -…...
2024年第十五届蓝桥杯青少组国赛(c++)真题—快速分解质因数
快速分解质因数 完整题目和在线测评可点击下方链接前往: 快速分解质因数_C_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tiku/cpp/show-3781.htmlhttps://www.hixinao.com/tiku/cpp/show-3781.html 若如其他赛事真题可自行前往题库中心查找,题…...
.Net Core微服务入门全纪录(四)——Ocelot-API网关(上)
系列文章目录 1、.Net Core微服务入门系列(一)——项目搭建 2、.Net Core微服务入门全纪录(二)——Consul-服务注册与发现(上) 3、.Net Core微服务入门全纪录(三)——Consul-服务注…...
chrome游览器JSON Formatter插件无效问题排查,FastJsonHttpMessageConverter导致Content-Type返回不正确
问题描述 chrome游览器又一款JSON插件叫JSON Formatter,游览器GET请求调用接口时,如果返回的数据是json格式,则会自动格式化展示,类似这样: 但是今天突然发现怎么也格式化不了,打开一个json文件倒是可以格…...
[Qt]系统相关-网络编程-TCP、UDP、HTTP协议
目录 前言 一、UDP网络编程 1.Qt项目文件 2.UDP类 QUdpSocket QNetworkDatagram 3.UDP回显服务器案例 细节 服务器设计 客户端设计 二、TCP网络编程 1.TCP类 QTcpServer QTcpSocket 2.TCP回显服务器案例 细节 服务器设计 客户端设计 三、HTTP客户端 1.HTTP…...
docker 安装 nginx 详解
在平常的开发工作中,我们经常会用到 nginx,那么在 docker 中 如何安装 nginx呢?又有哪些需要注意的事项呢?简单来说,第一步:拉取 nginx 镜像;第二步:创建 挂载目录并设置 nginx.conf…...
2025年大模型气象预测架构与商业化影响
随着人工智能技术,尤其是大模型(如深度学习、大规模神经网络)的飞速发展,气象预测的传统方法正在经历深刻变革。2025年,气象预测将借助大模型技术进入一个新的阶段。本文将从架构角度详细探讨2025年大模型在气象预测中的应用,并分析其对商业化的潜在影响。 一、2025年大模…...
基于51单片机和ESP8266(01S)、八位数码管、独立按键的WiFi定时器时钟
目录 系列文章目录前言一、效果展示二、原理分析三、各模块代码1、延时函数2、定时器03、串口4、数码管扫描5、独立按键扫描 四、主函数总结 系列文章目录 前言 有三个版本: ①普中开发板版本1:28800bps11.0592MHz,12T ②普中开发板版本2&am…...
Androidstudio 中,project下的.gitignore和module下的.gitignore有什么区别,生效优先级是什么
在 Android Studio 项目中,project 根目录下的 .gitignore 文件和 module 目录下的 .gitignore 文件作用和生效优先级是不同的,理解它们之间的区别非常重要,可以避免不必要的提交和冲突。 1. project 根目录下的 .gitignore: 作…...
python学习笔记3-字符串常用的方法
一、判断(9个): 二、查找和替换(8个) 三、⼤⼩写转换(5个) 四、⽂本对⻬(3个) 五、去除空⽩字符(3个) 六、拆分和连接 (6个࿰…...
提示词工程(Prompt Engineering)
1. Prompt 是什么? Prompt:提示词,是描述 AI 需要执行的任务的自然语言文本。 如上图所示,Prompt就是用户的提问。其实我们大家都用过Prompt,比如我们使用的ChatGPT、文心一言、豆包等AI产品时的提问就是Prompt&…...
后端开发Web
Maven Maven是apache旗下的一个开源项目,是一款用于管理和构建java项目的工具 Maven的作用 依赖管理 方便快捷的管理项目依赖的资源(jar包),避免版本冲突问题 统一项目结构 提供标准、统一的项目结构 项目构建 标准跨平台(…...
set和map(二)详解
文章目录 mapoperator[ ]的底层operator[ ]使用的实例 multimapequal_range 两道题目题目解析算法原理代码题目解析算法原理代码 map map和set大部分都相似,只有insert插入键值对不同,insert要插入pair,pair中有key和value。erase和find只与key有关&…...
第4章:Python TDD消除重复与降低依赖实践
写在前面 这本书是我们老板推荐过的,我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后,我突然思考,对于测试开发工程师来说,什么才更有价值呢?如何让 AI 工具更好地辅助自己写代码,或许…...
【语言处理和机器学习】概述篇(基础小白入门篇)
前言 自学笔记,分享给语言学/语言教育学方向的,但对语言数据处理感兴趣但是尚未入门,却需要在论文中用到的小伙伴,欢迎大佬们补充或绕道。ps:本文不涉及公式讲解(文科生小白友好体质)ÿ…...
vue3+uniapp开发鸿蒙初体验
去年7月20号,uniapp官网就已经开始支持鸿蒙应用开发了,话不多说,按照现有规则进行配置实现一下鸿蒙开发效果; 本文基于macOS Monterey 版本 12.6.5实现 开发鸿蒙的前置准备 这里就直接说我的版本: DevEco Studio 5.…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...
pam_env.so模块配置解析
在PAM(Pluggable Authentication Modules)配置中, /etc/pam.d/su 文件相关配置含义如下: 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块,负责验证用户身份&am…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...
成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
