vue3使用setup语法糖组件基础传值

 (1):defineProps:传入要使用的props定义自定义属性,传递过来的值具有响应式,和props一样;

(2):defineEimts:传入要自定义的事件,emit实例去传入自定义事件的值,和$emit或context.emit一样;

父组件:

<template><initInput :index="8" @changeInit="changeInit"></initInput>
</template><script lang="ts" setup>
import initInput from './computed/initInput.vue';
const changeInit = (e: any) => {console.log(e);  // 100
}
</script>

子组件:

<template><div><el-button type="primary" @click="change">点击</el-button></div>
</template>
<script lang="ts" setup>
import { onMounted, getCurrentInstance } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// data数据
let { proxy: this_ }: any = getCurrentInstance();
let route = useRoute();
let router = useRouter();
// mounted
// methods方法
let props = defineProps({index: {type: Number,default: 0}
});
let emit = defineEmits(["changeInit"]);
const change = () => {console.log(props.index);  // 8emit("changeInit", 100);
}
</script>
<style scoped  lang='scss'>
</style>

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

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

相关文章

S7-200可用的modbus RTU完成位轮询

网上的信息比较散&#xff0c;官方说明也不充分&#xff0c;尤其是涉及主站按需写入的部分没有见到现成案例。 以下记录完成位轮询读取&#xff0c;同时按需写入的程序。 初始化主站&#xff0c;初始化块的完成位M9.3通过上升沿触发一个M9.4&#xff0c;用于后面启动轮询。 第…

特征点检测与匹配——MATLAB R2022b

特征点检测与匹配在计算机视觉中的作用至关重要,它为图像处理、物体识别、增强现实等领域提供了坚实的基础。 目录 Harris角点检测 SIFT(尺度不变特征变换) SURF(加速稳健特征) ORB(Oriented FAST and Rotated BRIEF) 总结 特征点检测与匹配是计算机视觉中的一项基…

Vue3实现PDF在线预览功能

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来Vue篇专栏内容:Vue3现PDF在线预览功能 前言 在开发中&#xff0c;PDF预览和交互功能是一个常见的需求。无论是管理…

常用的EDA 工具

1&#xff09; 逻辑设计&#xff1a; Cadence 的Verilog XL  模拟电路设计&#xff1a; Mentor 的Viewdraw  电路合成&#xff1a; Synopsys 的Design Compiler  电路仿真&#xff1a; Synopsys 的Hsim 和Hspice  人工布局&#xff1a; Cadence 的Virtuso  自动布局…

基于ESP32的桌面小屏幕实战[5]:PCB下单

1. 焊接调试前准备 PCB下单 点击“PCB下单” 检查一下DRC 确认无错误之后&#xff0c;确认下单 然后就会跳转到下面的网页 基本上保持默认选项即可。可以看到“焊盘喷镀”有3个选项。 在选择表面处理工艺时&#xff0c;应综合考虑产品的具体需求、环保法规以及成本等因素。例…

云原生架构的演变与实践

云原生架构的演变与实践 在现代软件开发的时代背景下&#xff0c;云原生架构日益成为推动业务转型的关键。它以云为中心的应用架构和开发思维&#xff0c;不仅包括了容器化的基本形式&#xff0c;更涉及全方位的应用管理及优化。本文将围绕云原生的特征、迁移步骤以及模式展开…

探索现代 Web 开发中的流行技术:深入学习 Vite 的使用

在前端开发的世界中&#xff0c;构建工具扮演着越来越重要的角色。从 Webpack 到 Parcel&#xff0c;再到 Rollup&#xff0c;每个工具都有自己的独特定位和目标。而今天&#xff0c;我们要讨论的是一款近年来迅速崛起并受到广泛欢迎的构建工具— Vite。 本文将从基本原理到实…

如何通过 6 种方式将照片从 iPhone 传输到戴尔 PC?

“你知道如何将iPhone上的照片转移到电脑上吗&#xff1f;我的iPhone上有很多照片&#xff0c;所以我想将这些照片从iPhone转移到电脑上。请给我一些建议&#xff0c;谢谢&#xff01;” - Nirenling 在戴尔社区中发布 您的iPhone是否被各种精彩的照片和视频占满而存储空间不…

『SQLite』表达式操作

摘要&#xff1a;表达式是一个或多个值、运算符和计算值的 SQL 函数的组合。SQL 表达式与公式类似&#xff0c;都写在查询语言中。 基本语法 SELECT column1, column2, columnN FROM table_name WHERE [CONTION | EXPRESSION];布尔表达式 SQLite 的布尔表达式在匹配单个值的…

升级 Spring Boot 3 配置讲解 —— 支持断点传输的文件上传和下载功能

学会这款 &#x1f525;全新设计的 Java 脚手架 &#xff0c;从此面试不再怕&#xff01; 在现代 Web 应用中&#xff0c;文件上传和下载是非常常见的需求。然而&#xff0c;当文件较大时&#xff0c;传统的上传下载方式可能会遇到网络不稳定或传输中断的问题。为了解决这些问题…

框架Tensorflow2

深度学习框架之Tensorflow2 Tensorflow2版本的介绍 Tensorflow(简称tf)是深度学习框架&#xff0c;大大简化了建模的方法和步骤&#xff0c;把Keras Api当作核心&#xff0c;使用非常简单&#xff0c;跨平台&#xff0c;集成各种现成模型&#xff0c;eager mode使得调试起来不…

SpringBoot3-深入理解自动配置类的原理(尚硅谷SpringBoot3-雷神)

文章目录 目录了解自动配置 一、导入对应场景的Mean依赖&#xff1a;1、引入依赖**找到自动配置类的所有配置都存放在哪里** 二、编写主程序&#xff1a;SpringBootApplication观察源码时所需要知道的几个核心注解&#xff1a;1、观察SpringBootApplication源码都做了什么 三、…

Mongo高可用架构解决方案

Mongo主从复制哪些事(仅适用特定场景) 对数据强一致性要求不高的场景,一般微服务架构中不推荐 master节点可读可写操作,当数据有修改时,会将Oplog(操作日志)同步到所有的slave节点上。那么对于从节点来说仅只读,所有slave节点从master节点同步数据,然而从节点之间互相…

商业领域 - 竞标极简理解

竞标极简理解 竞标是一种投标过程&#xff0c;指参与者&#xff08;通常是企业或个人&#xff09;为了获得某个项目或合同的执行权&#xff0c;向招标人&#xff08;通常是采购方或项目发起方&#xff09;提交报价和方案&#xff0c;并争取获得招标人的认可 竞标是一种常见的招…

C#Halcon跨窗口颜色识别

机器视觉是一门让计算机模拟人类视觉功能的学科。颜色识别在其中扮演着重要的角色&#xff0c;它旨在通过对图像中的颜色信息进行分析&#xff0c;从而识别出图像中的目标物体或者区域。例如&#xff0c;在水果分拣系统中&#xff0c;可以根据水果的颜色&#xff08;如苹果的红…

01:C语言的本质

C语言的本质 1、ARM架构与汇编2、局部变量初始化与空间分配2.1、局部变量的初始化2.1、局部变量数组初始化 3、全局变量/静态变量初始化化与空间分配4、堆空间 1、ARM架构与汇编 ARM简要架构如下&#xff1a;CPU&#xff0c;ARM(能读能写)&#xff0c;Flash&#xff08;能读&a…

Transformer知识梳理

Transformer知识梳理 文章目录 Transformer知识梳理什么是Transformer&#xff1f;语言模型迁移学习 Transformer结构注意力层原始结构 总结 什么是Transformer&#xff1f; 语言模型 Transformer模型本质上都是预训练语言模型&#xff0c;大部分采用自监督学习&#xff08;S…

第29天:PHP应用弱类型脆弱Hash加密Bool类型Array数组函数转换比较

#知识点&#xff1a; 1、安全开发-原生PHP-弱类型脆弱 2、安全开发-原生PHP-函数&数据类型 3、安全开发-原生PHP-代码审计案例 1、 和 两个等号是弱比较&#xff0c;使用进行对比的时候&#xff0c;php解析器就会做隐式类型转换&#xff0c;如果两个值的类型不相等就会把两…

STM32F1学习——编码器接口

一、编码器接口 编码器接口可以接收正交编码器的信号&#xff0c;根据编码器旋转产生的正交信号脉冲&#xff0c;通过硬件自动控制CNT值的自增或自减&#xff0c;从而指出编码器的位置、旋转方向和旋转速度。 每个高级定时器和通用定时器都有一个编码器接口&#xff0c;他们会占…

如何删除 Docker 中的悬虚镜像?

在 Docker 中&#xff0c;悬虚镜像&#xff08;Dangling Images&#xff09;是指那些没有 标签 且没有被任何容器使用的镜像。这些镜像通常是由于构建过程中生成的中间层镜像或未正确清理的镜像残留。删除悬虚镜像可以释放磁盘空间并保持 Docker 环境的整洁。 1. 列出悬虚镜像…