当前位置: 首页 > news >正文

第二十四课 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是不建议在不同的组件直接传递值的&#xff0c;我们需要使用props方法来进行组件间的值传递 子组件调用父组件数据 父模板的数据&#xff0c;子组件是无法直接调用的 无法直接调用 1&#xff09;组件调用顶级对象中的data <div class&quo…...

Jenkins-pipeline语法说明

一. 简述&#xff1a; Jenkins Pipeline 是一种持续集成和持续交付&#xff08;CI/CD&#xff09;工具&#xff0c;它允许用户通过代码定义构建、测试和部署流程。 二. 关于jenkinsfile&#xff1a; 1. Sections部分&#xff1a; Pipeline里的Sections通常包含一个或多个Direc…...

小米Vela操作系统开源:AIoT时代的全新引擎

小米近日正式开源了其物联网嵌入式软件平台——Vela操作系统&#xff0c;并将其命名为OpenVela。这一举动在AIoT&#xff08;人工智能物联网&#xff09;领域掀起了不小的波澜&#xff0c;也为开发者们提供了一个强大的AI代码生成器和开发平台。OpenVela项目源代码已托管至GitH…...

NodeJs如何做API接口单元测试? --【elpis全栈项目】

NodeJs API接口单元测试 api单元测试需要用到的 assert&#xff1a;断言库 (还要一些断言库比如:Chai)supertest&#xff1a; 模拟http请求 简单的例子&#xff1a; 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++)真题—快速分解质因数

快速分解质因数 完整题目和在线测评可点击下方链接前往&#xff1a; 快速分解质因数_C_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tiku/cpp/show-3781.htmlhttps://www.hixinao.com/tiku/cpp/show-3781.html 若如其他赛事真题可自行前往题库中心查找&#xff0c;题…...

.Net Core微服务入门全纪录(四)——Ocelot-API网关(上)

系列文章目录 1、.Net Core微服务入门系列&#xff08;一&#xff09;——项目搭建 2、.Net Core微服务入门全纪录&#xff08;二&#xff09;——Consul-服务注册与发现&#xff08;上&#xff09; 3、.Net Core微服务入门全纪录&#xff08;三&#xff09;——Consul-服务注…...

chrome游览器JSON Formatter插件无效问题排查,FastJsonHttpMessageConverter导致Content-Type返回不正确

问题描述 chrome游览器又一款JSON插件叫JSON Formatter&#xff0c;游览器GET请求调用接口时&#xff0c;如果返回的数据是json格式&#xff0c;则会自动格式化展示&#xff0c;类似这样&#xff1a; 但是今天突然发现怎么也格式化不了&#xff0c;打开一个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 详解

在平常的开发工作中&#xff0c;我们经常会用到 nginx&#xff0c;那么在 docker 中 如何安装 nginx呢&#xff1f;又有哪些需要注意的事项呢&#xff1f;简单来说&#xff0c;第一步&#xff1a;拉取 nginx 镜像&#xff1b;第二步&#xff1a;创建 挂载目录并设置 nginx.conf…...

2025年大模型气象预测架构与商业化影响

随着人工智能技术,尤其是大模型(如深度学习、大规模神经网络)的飞速发展,气象预测的传统方法正在经历深刻变革。2025年,气象预测将借助大模型技术进入一个新的阶段。本文将从架构角度详细探讨2025年大模型在气象预测中的应用,并分析其对商业化的潜在影响。 一、2025年大模…...

基于51单片机和ESP8266(01S)、八位数码管、独立按键的WiFi定时器时钟

目录 系列文章目录前言一、效果展示二、原理分析三、各模块代码1、延时函数2、定时器03、串口4、数码管扫描5、独立按键扫描 四、主函数总结 系列文章目录 前言 有三个版本&#xff1a; ①普中开发板版本1&#xff1a;28800bps11.0592MHz&#xff0c;12T ②普中开发板版本2&am…...

Androidstudio 中,project下的.gitignore和module下的.gitignore有什么区别,生效优先级是什么

在 Android Studio 项目中&#xff0c;project 根目录下的 .gitignore 文件和 module 目录下的 .gitignore 文件作用和生效优先级是不同的&#xff0c;理解它们之间的区别非常重要&#xff0c;可以避免不必要的提交和冲突。 1. project 根目录下的 .gitignore&#xff1a; 作…...

python学习笔记3-字符串常用的方法

一、判断&#xff08;9个&#xff09;&#xff1a; 二、查找和替换&#xff08;8个&#xff09; 三、⼤⼩写转换&#xff08;5个&#xff09; 四、⽂本对⻬&#xff08;3个&#xff09; 五、去除空⽩字符&#xff08;3个&#xff09; 六、拆分和连接 &#xff08;6个&#xff0…...

提示词工程(Prompt Engineering)

1. Prompt 是什么&#xff1f; Prompt&#xff1a;提示词&#xff0c;是描述 AI 需要执行的任务的自然语言文本。 如上图所示&#xff0c;Prompt就是用户的提问。其实我们大家都用过Prompt&#xff0c;比如我们使用的ChatGPT、文心一言、豆包等AI产品时的提问就是Prompt&…...

后端开发Web

Maven Maven是apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具 Maven的作用 依赖管理 方便快捷的管理项目依赖的资源&#xff08;jar包&#xff09;&#xff0c;避免版本冲突问题 统一项目结构 提供标准、统一的项目结构 项目构建 标准跨平台(…...

set和map(二)详解

文章目录 mapoperator[ ]的底层operator[ ]使用的实例 multimapequal_range 两道题目题目解析算法原理代码题目解析算法原理代码 map map和set大部分都相似&#xff0c;只有insert插入键值对不同&#xff0c;insert要插入pair,pair中有key和value。erase和find只与key有关&…...

第4章:Python TDD消除重复与降低依赖实践

写在前面 这本书是我们老板推荐过的&#xff0c;我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后&#xff0c;我突然思考&#xff0c;对于测试开发工程师来说&#xff0c;什么才更有价值呢&#xff1f;如何让 AI 工具更好地辅助自己写代码&#xff0c;或许…...

【语言处理和机器学习】概述篇(基础小白入门篇)

前言 自学笔记&#xff0c;分享给语言学/语言教育学方向的&#xff0c;但对语言数据处理感兴趣但是尚未入门&#xff0c;却需要在论文中用到的小伙伴&#xff0c;欢迎大佬们补充或绕道。ps&#xff1a;本文不涉及公式讲解&#xff08;文科生小白友好体质&#xff09;&#xff…...

vue3+uniapp开发鸿蒙初体验

去年7月20号&#xff0c;uniapp官网就已经开始支持鸿蒙应用开发了&#xff0c;话不多说&#xff0c;按照现有规则进行配置实现一下鸿蒙开发效果&#xff1b; 本文基于macOS Monterey 版本 12.6.5实现 开发鸿蒙的前置准备 这里就直接说我的版本&#xff1a; DevEco Studio 5.…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...