Vue3 父子组件之间传值

news2024/11/22 22:05:26

Vue3+TS+Vite环境开发

1.父组件给子组件传递方法，属性和值

父组件引入子组件处里面绑定方法 showBtn ，属性name和值msg
在这里插入图片描述
在这里插入图片描述

子组件通过defineProps()来接收
在这里插入图片描述
在这里插入图片描述

子组件页面显示父组件的方法 showBtn ，属性name和值msg

在这里插入图片描述

2.父组件接收子组件传递的方法和参数

子组件通过defineExpose()方法把要传递的参数和方法暴露出去
在这里插入图片描述
父组件通过ref来接收
在这里插入图片描述
这里使用方法onMounted进入页面就执行
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

ModaHub魔搭社区：向量数据库Zilliz Cloud的AUTOINDEX教程

ModaHub魔搭社区：向量数据库Zilliz Cloud的AUTOINDEX教程

目录 创建索引和向量搜索 总结 为满足用户不同需求，Zilliz Cloud 提供 3 种类型的集群 CU——性能型、容量型和经济型。但是，为不同类型 CU 集群中的 Collection 创建索引时，通常需要根据所选择的 CU 类型调整索引参数。为了方便您创建索引，免去调节参数的麻烦，Zilliz C…
阅读更多...
Metasploit Pro 4.22.1-2023070501 (Linux, Windows) - 渗透测试框架

Metasploit Pro 4.22.1-2023070501 (Linux, Windows) - 渗透测试框架

Metasploit Pro 4.22.1-2023070501 (Linux, Windows) - 渗透测试框架 Rapid7 Penetration testing 请访问原文链接：https://sysin.org/blog/metasploit-pro-4/，查看最新版。原创作品，转载请保留出处。 作者主页：sysin.org 世界…
阅读更多...
投影矩阵公式推导

投影矩阵公式推导

如下图所示&#xff1a; y对x投影记作yx&#xff0c;则&#xff1a; <yx, x> <yx z, x> |yx| * |x| yx |yx| * x / |x| <yx, x> / |x| *x / |x| &#xff0c;即可得到下图中的矩阵。 注意该矩阵的如下性质&#xff1a; p是对称的rank 1p^2 p QE分…
阅读更多...
基于STM32CUBEMX驱动TOF模块VL6180与VL6180X(3)----修改设备地址

基于STM32CUBEMX驱动TOF模块VL6180与VL6180X(3)----修改设备地址

基于STM32CUBEMX驱动TOF模块VL6180与VL6180X----3.修改设备地址 概述修改设备地址主程序测试结果 概述 本章主要介绍如何修改VL6180X传感器的I2C地址&#xff0c;并成功驱动设备以使用新的地址。VL6180X是一种多功能、高性能的接近和环境光传感器&#xff0c;常用于测量物体与…
阅读更多...
如何在海外进行A/B测试

如何在海外进行A/B测试

A/B测试是对应用的各个版本进行实验&#xff0c;以分析用户如何与其交互的有效过程&#xff0c;它能够帮助我们改进关键指标&#xff0c;例如参与度或应用内购买&#xff0c;以及推出新功能&#xff0c;从而最大限度地降低大规模流失用户的风险。 A/B测试和ASO优化通常适用于应…
阅读更多...
唐僧的项目总结报告，我是真服了

唐僧的项目总结报告，我是真服了

早上好&#xff0c;我是老原。 上个月给大家更新了一篇项目管理案例——西天取经。 由于该项目的亏损必须要裁掉团队中的其中一人&#xff0c;究竟该裁掉谁&#xff0c;大家也是讨论的非常激烈&#xff0c;各有各的建议。 鉴于项目已经成功交付&#xff0c;唐僧作为这个项目…
阅读更多...
基于51单片机和proteus的智能加湿器设计

基于51单片机和proteus的智能加湿器设计

此系统是基于51单片机和proteus的仿真设计&#xff0c;功能如下&#xff1a; 1. LCD1602实时显示环境温湿度。 2. 系统分为自动/手动模式&#xff0c;自动模式下系统根据读取的湿度值和设定的湿度值自动运行&#xff0c; 手动模式下使用按键启动/停止设备。 3. 湿度阈值可通…
阅读更多...
基于 jmeter 和 shell 的接口性能自动化

基于 jmeter 和 shell 的接口性能自动化

目录 前言&#xff1a; 1. 总体需求 2. 实现流程 3.准备工作 4.具体实现 4.1 用例执行 主流程脚本 4.2 服务器监控 监控脚本&#xff1a; 服务器监控脚本 4.3 生成 html 报告 html 样式表 发邮件脚本 前言&#xff1a; 基于JMeter和Shell的接口性能自动化是一种有…
阅读更多...
SpringBoot 项目使用 Redis 对用户IP进行接口限流

SpringBoot 项目使用 Redis 对用户IP进行接口限流

本文主要参考了该篇文章&#xff1a;https://www.zhihu.com/question/586213782/answer/3038040317?utm_id0 文章目录 一、思路1.1 固定时间段&#xff08;旧思路&#xff09;1.1.1 思路描述1.1.2 思路缺陷 1.2 滑动窗口&#xff08;新思路&#xff09;1.2.1 思路描述1.2.2 Re…
阅读更多...
ELK 企业级日志分析系统（二）

ELK 企业级日志分析系统（二）

ELK 一、FilebeatELK 部署二、logstash的使用grok正则捕获插件mutate 数据修改插件multiline 多行合并插件date 时间处理插件 一、FilebeatELK 部署 Node1节点&#xff08;2C/4G&#xff09;&#xff1a;node1/192.168.136.52 Elasticsearch Node2节点&#xff08;2C/4G&#…
阅读更多...
第7集丨JavaScript 中函数——概述

第7集丨JavaScript 中函数——概述

目录 一、函数概览二、函数定义2.1 函数声明 (函数语句)2.2 函数表达式 (function expression)2.3 匿名函数立即执行2.4 函数生成器声明 (function* 语句)2.5 函数生成器表达式 (function*表达式)2.6 箭头函数表达式 (>)2.7 Function构造函数2.8 生成器函数的构造函数 三、函…
阅读更多...
C#实现将小数值四舍五入为整数

C#实现将小数值四舍五入为整数

一、需求说明 在项目的开发中&#xff0c;遇到一些除法计算内容会产生小数值&#xff0c;但是又需要根据项目的实际情况将这些小数内容化为整数&#xff0c;方便后续内容的实现。 二、需求分析 将小数内容转为整数【但是转为小数又分为几种情况】&#xff1a; ①将小数取为下…
阅读更多...
银河麒麟服务器v10 sp1 部署 mysql 客户端工具 DBeaver

银河麒麟服务器v10 sp1 部署 mysql 客户端工具 DBeaver

上一篇&#xff1a;银河麒麟服务器v10 sp1 安装mysql_csdn_aspnet的博客-CSDN博客 DBeaver 是数据库管理器的客户端&#xff0c;它允许以舒适的方式管理数据库实例的数据和选项。DBeaver 支持任何具有 JDBC 驱动程序的数据库 – MySQL/MariaDB、PostgreSQL、Oracle、DB2 LUW、…
阅读更多...
性能测试工具 Loadrunner 和 Jmeter 测试结果大 PK

性能测试工具 Loadrunner 和 Jmeter 测试结果大 PK

目录 前言&#xff1a; 测试一&#xff1a;1 个用户陆续执行登录操作&#xff0c;迭代 100 次&#xff0c;运行完就结束 测试二&#xff1a;50 个用户并发执行登录操作&#xff08;有集合点&#xff09; 前言&#xff1a; 性能测试工具LoadRunner和JMeter都是流行的工具&am…
阅读更多...
ASP.net 配置CSP

ASP.net 配置CSP

ASP.net 开启全局CSP配置 <add name"Content-Security-Policy" value"default-src self; script-src self unsafe-inline unsafe-eval http://seal.digicert.com; style-src self unsafe-inline;" />在web.config中添加该行配置即可 配置完成后&am…
阅读更多...
Im6ull 系统移植之 命令行

Im6ull 系统移植之 命令行

一 系统移植 系统移植 主要分四个不分由系统启动流程决定 U-Boot的移植 Linux内核的移植 根文件系统的构建系统烧写 1.1 交叉编译环境 交叉编译器有很多种&#xff0c;我们使用 Linaro 出品的交叉编译器&#xff0c; Linaro 是一间非营利性质的开 放源代码软件工程公…
阅读更多...
LeetCode[11]盛水最多的容器

LeetCode[11]盛水最多的容器

难度&#xff1a;Medium 题目&#xff1a; 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 …
阅读更多...
enreka使用错误

enreka使用错误

错误 java.net.UnknownHostException: INVENTORYSERVICE 分析&解决&#xff1a; 这里的请求执行错误 但eureka可以找到服务 手动创建RestTemlate到容器中&#xff0c;未加LoadBalanced注解 加上注解后重试&#xff0c;成功
阅读更多...
在linux服务器上的基础操作

在linux服务器上的基础操作

1.查看该文件最后两行的记录 tail -n 2 book.txt2.查找文本中的内容 grep info book.txt3.查找内容的上下文本内容 $ grep -C 2 info book.txt
阅读更多...
leetcode 701. 二叉搜索树中的插入操作

leetcode 701. 二叉搜索树中的插入操作

2023.7.12 比较简单&#xff0c;不多说直接看代码&#xff1a; 迭代法&#xff1a; class Solution { public:TreeNode* insertIntoBST(TreeNode* root, int val) {//树为空的情况if(rootnullptr){TreeNode* node new TreeNode(val);return node;}//需要一个pre节点指向父节…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023