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

Vue3父子组件传参

一,父子组件传参

应用场景:父子组件传参
Vue3碎片:defineEmits,defineProps,ref,reactive,onMounted

1.父组件传子组件

a.父组件传参子组件

import { ref} from 'vue'
import OnChild from './onChild.vue'
const toGive=ref("apple");
<OnChild :getGive="toGive" />

b.子组件获取

import { onMounted} from 'vue'
const getFruit=defineProps({getGive:String
})
onMounted(()=>{console.log("子组件获得",getFruit.getGive)
})

2.子组件传父组件

a,子组件

import { reactive} from 'vue'
const playList=reactive({ name:"路人甲"})
playList.type="乒乓球🏓!";
const emit= defineEmits(['toList']);
const pass=()=>{playList.status="发送了一个"emit('toList',playList)
}

b,父组件获取

import { reactive} from 'vue'
import OnChild from './onChild.vue'
const getList= reactive({});
<OnChild  @toList="getListArr"/>
const getListArr=(value)=>{// getList.value=valuegetList.value = { ...Object.assign({}, value)}console.log("接收一个",getList.value);
}

c,父组件更新子组件传送信息

const  updateInfo=(()=>{toGive.value="orange";console.log("传给子组件一个",toGive.value);
})

3.效果图

在这里插入图片描述

简单使用,总结至此,欢迎各位工友交流学习。
传送门:
1.Vue3中provide,inject使用
2.Vue3中使用自定义指令
3.Vue3中动态组件使用
在这里插入图片描述

相关文章:

Vue3父子组件传参

一&#xff0c;父子组件传参&#xff1a; 应用场景&#xff1a;父子组件传参 Vue3碎片&#xff1a;defineEmits&#xff0c;defineProps&#xff0c;ref&#xff0c;reactive&#xff0c;onMounted 1.父组件传子组件 a.父组件传参子组件 import { ref} from vue import OnChi…...

SpringBoot整理-微服务

Spring Boot 在构建微服务架构的应用中发挥着关键作用。微服务是一种将大型复杂应用拆分为更小、更容易管理和维护的服务的架构风格。每个服务通常围绕特定的业务功能构建,并且可以独立部署、扩展和更新。Spring Boot 提供了一系列特性和工具,使得创建和维护这些独立服务变得…...

服务器和CDN推荐

简介 陆云Roovps是一家成立于2021年的主机服务商&#xff0c;主要业务是销售美国服务器、香港服务器及国外湖北十堰高防服务器&#xff0c;还有相关CDN产品。&#xff08; 地址&#xff1a;roovps&#xff09; 一、相关产品...

c#读取csv文件中的某一列的数据

chat8 (chat779.com) 上面试GPT-3.5,很好的浏览网站&#xff0c;输入问题&#xff0c;可得到答案。 问题1&#xff1a;c#如何在csv中读取某一列数据 解答方案&#xff1a;在 C#中&#xff0c;你可以使用File.ReadAllLines来读取CSV中的所有行&#xff0c;然后逐行解析每一行…...

不懂快团团大团长对接?凭什么快团团的钱轮到你赚?

对接头部快团团大团长&#xff0c;让快团团大团长帮你卖货 分享几个推品的关键词&#xff1a; 1.推品的内容&#xff1a;产品实拍图核心卖点 不要上来就发笔记&#xff0c;你的产品图和文案还没吸引人&#xff0c;就发笔记没有人看。 可以先发你产品的简短卖点和图片&#xff…...

OpenGL 入门(九)—Material(材质)和 光照贴图

文章目录 材质设置材质光的属性脚本实现 光照贴图漫反射贴图高光反射贴图 材质 材质本质是一个数据集&#xff0c;主要功能就是给渲染器提供数据和光照算法。 如果我们想要在OpenGL中模拟多种类型的物体&#xff0c;我们必须针对每种表面定义不同的材质(Material)属性。 我们…...

jmeter-03界面介绍

文章目录 主界面介绍工具栏介绍测试计划介绍线程组介绍线程组——选择测试计划&#xff0c;右键-->添加-->线程-->线程组1.线程数2.准备时长(Ramp-up)3.循环次数4.same user on each iteratio5.调度器 主界面介绍 工具栏介绍 新建测试计划&#xff1a;创建一个空白的测…...

探究 MySQL 中使用 where 1=1 是否存在性能影响

文章目录 前言聊聊 mybatis 中多条件拼接的两种常规写法where 11使用 <where> 标签 性能影响where 11<where> 标签 总结个人简介 前言 最近在项目中使用 mybatis 写 SQL 使用了 where 11 来简化多条件拼接的写法&#xff0c;案例如下&#xff0c;借此聊聊多条件拼…...

VSCode无法启动:Waiting for server log...

问题基本情况 [13:30:20.720] > code 1.86.0 (commit 05047486b6df5eb8d44b2ecd70ea3bdf775fd937) [13:30:20.724] > Running ssh connection command... /var/fpwork/reiss/vscdata/server/cplane/.vscode-server/code-05047486b6df5eb8d44b2ecd70ea3bdf775fd937 comman…...

VMware虚拟机清理瘦身

用了一段时间VMware虚拟机之后&#xff0c;发现内存越来越小&#xff0c;也没装什么软件。。。 1.查询磁盘空间分布 虚拟机中磁盘空间查询 先看一下哪些地方占用的空间大&#xff0c;进行排查。 2.排查VMware复制文件产生的缓存路径 VMware复制文件有一个特点&#xff0c;以…...

Coil:Android上基于Kotlin协程的超级图片加载库

Coil&#xff1a;Android上基于Kotlin协程的超级图片加载库 1. coil简介 在当今移动应用程序的世界中&#xff0c;图片加载是一个不可或缺的功能。为了让应用程序能够高效地加载和显示图片&#xff0c;开发人员需要依赖于强大的图片加载库。而今天&#xff0c;我将向大家介绍…...

时间序列(Time-Series)MultiWaveletCorrelation.py代码解析

#这两行导入了PyTorch和NumPy库&#xff0c;分别用于深度学习和数值计算 import torch import numpy as np #这两行导入了PyTorch的神经网络模块和函数模块。 import torch.nn as nn import torch.nn.functional as F from torch import Tensor from typing import List, Tuple…...

C++的缺省参数和函数重载

目录 1.缺省参数 1.1缺省参数的概念 1.2缺省参数的分类 1.3缺省参数使用场景 2.函数重载 2.1函数重载的概念 2.2构成函数重载 1.缺省参数 1.1缺省参数的概念 概念&#xff1a;缺省参数是声明或定义函数时为函数的参数指定一个缺省值。在调用该函数时&#xff0c;如果没…...

nginx upstream server主动健康检测模块ngx_http_upstream_check_module 使用和源码分析(上)

目录 1. 缘起2. 配置指令2.1 check2.2 check_keepalive_requests2.3 check_http_send2.4 check_http_expect_alive2.5 check_shm_size2.6 check_status3. 加载健康检测模块3.1 模块的编译3.2 模块的配置4. 测试验证5. 思考与问题6. 源码分析1. 缘起 众所周知,nginx原生的upst…...

第01课:自动驾驶概述

文章目录 1、无人驾驶行业概述什么是无人驾驶智慧出行大趋势无人驾驶能解决什么问题行业趋势无人驾驶的发展历程探索阶段&#xff08;2004年以前&#xff09;发展阶段&#xff08;2004年-2016年&#xff09;成熟阶段&#xff08;2016年以后&#xff09; 2、无人驾驶技术路径无人…...

Docker进阶篇-CIG重量级监控系统

一、简介 通过docker stats命令可以很方便的查看当前宿主机上所有容器的CPU、内存、网络流量等数 据&#xff0c;可以满足一些小型应用。 但是docker stats统计结果只能是当前宿主机的全部容器&#xff0c;数据资料是实时的&#xff0c;没有地方存储、 没有健康指标过线预警…...

鸿蒙踩坑合集

各位网络中的小伙们&#xff0c;关于鸿蒙的踩坑陆陆续续收集中&#xff0c;本文章会持续更新&#xff0c;希望对您有所帮助 1、预览视图无法正常加载 重新编译项目&#xff0c;点击刷新按钮&#xff0c;控制台提示Build task failed. Open the Run window to view details. 解…...

Golang-Map有序输出——使用orderedmap库实现

前言 工作中遇到一个问题&#xff1a;需要导出一个MySQL表格&#xff0c;表格内容由sql查询得来。但现在发现&#xff0c;所导出的表格中&#xff0c;各列的顺序不确定。多次导出&#xff0c; 每一次的序列顺序也是不定的。 因此确定是后端&#xff0c;Map使用相关导致的问题。…...

基础数学问题整理

最近刷了一些关于基础数学问题的题目&#xff0c;大致是关于组合数、分解质因数还有一些思维题&#xff0c;题目来自洛谷的【数学1】基础数学问题 - 题单 - 洛谷&#xff0c;很多思路还是之前没有见过的&#xff0c;都是简单到一般难度的题目&#xff08;橙、题、绿题&#xff…...

【Linux】环境基础开发工具的使用(一)

前言&#xff1a;在此之前我们学习了一些Linux的权限&#xff0c;今天我们进一步学习Linux下开发工具的使用。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:Linux的深度刨析 &#x1f448; &#x1f4af;代码仓库:卫卫周大胖的学习日记…...

5个宝藏级3D模型下载站:从GLB到Blender,一站式解决你的建模素材需求

1. 为什么你需要这些3D模型资源站&#xff1f; 作为一个在3D建模领域摸爬滚打多年的老手&#xff0c;我深知找素材的痛苦。记得刚入行时&#xff0c;为了找一个简单的沙发模型&#xff0c;我花了整整三天翻遍各种论坛和资源站。现在回头看&#xff0c;如果当时有人给我一份靠谱…...

手把手教你用Claude Desktop的MCP协议,5分钟搞定本地SQLite数据库查询

5分钟实现自然语言查询SQLite&#xff1a;Claude Desktop MCP协议实战指南 想象一下这样的场景&#xff1a;你手头有一个存储着上万条商品信息的SQLite数据库&#xff0c;现在需要快速统计某个品类的库存数量。传统方式可能需要打开数据库工具、编写SQL查询语句&#xff0c;或者…...

UDS诊断自动化测试入门:用Python模拟Tester端,批量刷写DID与安全访问

UDS诊断自动化测试实战&#xff1a;Python构建高覆盖率ECU测试框架 在汽车电子控制单元&#xff08;ECU&#xff09;开发中&#xff0c;诊断功能测试往往是最耗时的手工操作环节之一。想象一下&#xff0c;当需要验证数百个数据标识符&#xff08;DID&#xff09;的读写功能时&…...

TradingAgents-CN 多智能体金融分析系统:企业级容器化部署实战指南

TradingAgents-CN 多智能体金融分析系统&#xff1a;企业级容器化部署实战指南 【免费下载链接】TradingAgents-CN 基于多智能体LLM的中文金融交易框架 - TradingAgents中文增强版 项目地址: https://gitcode.com/GitHub_Trending/tr/TradingAgents-CN TradingAgents-CN…...

MetaGPT终极指南:5步开启AI驱动软件开发新时代

MetaGPT终极指南&#xff1a;5步开启AI驱动软件开发新时代 【免费下载链接】MetaGPT &#x1f31f; The Multi-Agent Framework: First AI Software Company, Towards Natural Language Programming 项目地址: https://gitcode.com/GitHub_Trending/me/MetaGPT MetaGPT是…...

Qt Network 模块中的 TCP/IP 网络编程详解

Qt 是一个功能强大的跨平台 C 框架&#xff0c;其 Qt Network 模块为应用程序提供了丰富的网络通信能力&#xff0c;极大地简化了网络编程的复杂性。在众多网络协议中&#xff0c;TCP/IP 协议栈是互联网通信的基础&#xff0c;Qt Network 提供了 QTcpSocket 和 QTcpServer 等类…...

eNSP安装避坑指南:WinPcap/Wireshark/VirtualBox依赖关系解析

eNSP安装避坑指南&#xff1a;WinPcap/Wireshark/VirtualBox依赖关系解析 当你第一次打开eNSP安装包时&#xff0c;可能会疑惑为什么需要同时安装WinPcap、Wireshark和VirtualBox这三个看似不相关的软件。这就像组装一台精密仪器——少了任何一个螺丝&#xff0c;整台机器都无法…...

Benchmark.js 配置选项终极指南:如何优化你的 JavaScript 性能测试环境

Benchmark.js 配置选项终极指南&#xff1a;如何优化你的 JavaScript 性能测试环境 【免费下载链接】benchmark.js A benchmarking library. As used on jsPerf.com. 项目地址: https://gitcode.com/gh_mirrors/be/benchmark.js Benchmark.js 是一款专业的 JavaScript 性…...

Godot-MCP:如何通过双向语义桥梁解决游戏开发中的创意断层问题

Godot-MCP&#xff1a;如何通过双向语义桥梁解决游戏开发中的创意断层问题 【免费下载链接】Godot-MCP An MCP for Godot that lets you create and edit games in the Godot game engine with tools like Claude 项目地址: https://gitcode.com/gh_mirrors/god/Godot-MCP …...

Translategemma-27b-it与OCR结合:图片翻译完整流程

Translategemma-27b-it与OCR结合&#xff1a;图片翻译完整流程 1. 引言 想象一下这样的场景&#xff1a;你在异国旅行时看到一份精美的菜单&#xff0c;却因为语言障碍而不知道点什么&#xff1b;或者在研究国外产品时&#xff0c;标签上的说明文字完全看不懂。传统的翻译工具…...