Vue3 的 emit 该怎么写, vue2 对比

Vue3 的 emit 该怎么写, vue2 对比

这是个新手问题,从 vue2 转到 vue3 之后,一时间不知道该怎么用它了。

vue2 用法

vue2 在 template 中 和 在方法中的用法如下:

<template>
	<button @click="$emit('clicked', '要传递的数据')">按钮</button>
</template>

<script>
	export default {
		methods: {
			buttonClicked(){
				this.$emit('clicked', '要传递的数据')
			}
		}
	}
</script>

vue3 用法

vue3 的写法如下,其实变化不大,就是把 $ 去掉,首先声明一个 emit 变量,接下来就是一样的用法了。
当然,它还能进行验证,更高级的用法可以看官方的说明:

vue3: 声明触发的事件

<template>
	<button @click="emit('clicked', '要传递的数据')">按钮</button>
</template>

<script lang="ts" setup>

const emit = defineEmits(['click'])
funtion buttonClicked(){
	emit('clicked', '要传递的数据')
}
</script>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构期末复习(3)栈和队列

堆栈&#xff08;stack&#xff09; 堆栈&#xff08;stack&#xff09;是一种基于后进先出&#xff08;LIFO&#xff0c;Last In First Out&#xff09;原则的数据结构。它模拟了现实生活中的堆栈&#xff0c;类似于一摞盘子或一堆书。 堆栈有两个基本操作&#xff1a;入栈&a…

移除链表元素

description 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5] 示例 2&#xff1a; …

开放原子训练营(第四季)TobudOS——TobudOS内核移植(keil版)

前言 12月份参加了开放原第四季线下活动&#xff0c;觉得很有意义。通过这篇博文&#xff0c;记录一下这次活动进行的移植TobudOS内核的过程&#xff0c;下面就让我们开始吧。 开发板介绍 本次使用的开发板型号为STM32H750&#xff0c;当然了&#xff0c;其他型号的开发版也…

OSG读取和添加节点学习

之前加载了一个模型&#xff0c;代码是&#xff0c; osg::Group* root new osg::Group(); osg::Node* node new osg::Node(); node osgDB::readNodeFile("tree.osg"); root->addChild(node); root是指向osg::Group的指针&#xff1b; node是 osg:…

240101-5步MacOS自带软件无损快速导出iPhone照片

硬件准备&#xff1a; iphone手机Mac电脑数据线 操作步骤&#xff1a; Step 1: 找到并打开MacOS自带的图像捕捉 Step 2: 通过数据线将iphone与电脑连接Step 3&#xff1a;iphone与电脑提示“是否授权“&#xff1f; >>> “是“Step 4&#xff1a;左上角选择自己的设…

软件工程期末总复习

第一章 软件工程概述 什么是软件&#xff1a;程序数据配套文档 软件危机&#xff1a;计算机软件开发过程中所遇到的一系列严重问题 软件危机的背景&#xff1a;20世纪60年代中后期软件开发需求急剧增长 软件工程的定义&#xff1a;指导计算机软件开发和维护的工程学科&…

安装Typora

链接&#xff1a;https://pan.baidu.com/s/1OLHtUTziKdB0sW0UIOnBBw?pwd6666 提取码&#xff1a;6666

spring创建与使用

spring创建与使用 创建 Spring 项⽬创建⼀个 Maven 项⽬添加 Spring 框架⽀持添加启动类 存储 Bean 对象创建 Bean将 Bean 注册到容器 获取并使⽤ Bean 对象创建 Spring 上下⽂获取指定的 Bean 对象获取bean对象的方法 使⽤ Bean 总结 创建 Spring 项⽬ 接下来使⽤ Maven ⽅式…

css 实现圆角渐变色效果

效果图 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>css 实现圆角渐变色效果</title…

字母简化(UPC练习)

题目描述 给出一串全部为小写英文字母的字符串&#xff0c;要求把这串字母简化。简化规则是&#xff1a;统计连续出现的字母数&#xff0c;输出时先输出个数&#xff0c;再输出字母。比如&#xff1a;aaabbbaa&#xff0c;则简化为3a3b2a&#xff1b;而zzzzeeeeea&#xff0c;…

渗透线上下料控制(SCL源代码)

有关渗透线的其它详细介绍请参考下面链接文章&#xff1a; https://rxxw-control.blog.csdn.net/article/details/133611151https://rxxw-control.blog.csdn.net/article/details/133611151这里的渗透线上下料属于整个渗透线流程里的最前端和最后端&#xff0c;分别负责待处理…

机器学习的分类与经典算法

机器学习算法按照学习方式分类&#xff0c;可以分为有监督学习&#xff08;Supervised Learning&#xff09;、无监督学习&#xff08;Unsupervised Learning&#xff09;、半监督学习&#xff08;Semi-supervised Learning&#xff09;、强化学习&#xff08;Reinforcement Le…

C++面向对象基础-构造函数

1、构造函数 1.1 基本使用 构造函数是一种特殊的成员函数&#xff0c;用于创建对象&#xff0c;写法上有以下要求&#xff1a; 函数名必须与类名完全相同构造函数不写返回值如果程序员不手动编写构造函数&#xff0c;编译器就会自动添加一个无参的构造函数 手动添加构造函数&am…

小白学 PyTorch 系列:54个超强 pytorch 操作

最近观察到一个有趣的趋势&#xff0c;越来越多的人在学术界热衷于学习和应用PyTorch。在工业界&#xff0c;虽然仍有一些项目在延续使用之前的深度学习框架&#xff0c;但 PyTorch 的影响力也在逐渐渗透。 对于昨天为什么没发文&#xff0c;原因很心酸。把 PyTorch 的这篇文章…

亚马逊鲲鹏系统一款自动化全能软件

亚马逊鲲鹏系统是一款专为亚马逊买家提供全方位功能的自动化软件。它不仅可以轻松实现自动注册、养号、测评、QA等一系列操作&#xff0c;更在用户关心的账号关联问题上做出了创新性的解决方案。有的朋友可能对全自动化操作心存疑虑&#xff0c;担心可能引起关联从而导致封号&a…

24届春招实习必备技能(一)之MyBatis Plus入门实践详解

MyBatis Plus入门实践详解 一、什么是MyBatis Plus? MyBatis Plus简称MP&#xff0c;是mybatis的增强工具&#xff0c;旨在增强&#xff0c;不做改变。MyBatis Plus内置了内置通用 Mapper、通用 Service&#xff0c;仅仅通过少量配置即可实现单表大部分 CRUD 操作&#xff0…

FileZilla的使用,主动模式和被动模式思维导图

注&#xff1a;图片 &#xff08;与上面的思维导图文字配图看&#xff09;

PAT乙级1045 快速排序

著名的快速排序算法里有一个经典的划分过程&#xff1a;我们通常采用某种方法取一个元素作为主元&#xff0c;通过交换&#xff0c;把比主元小的元素放到它的左边&#xff0c;比主元大的元素放到它的右边。 给定划分后的 N 个互不相同的正整数的排列&#xff0c;请问有多少个元…

node版本管理器nvm的下载和使用

介绍 nvm 全名 node.js version management&#xff0c;顾名思义是一个nodejs的版本管理工具。通过它可以安装和切换不同版本的nodejs。 下载和安装 在下载和安装nvm前&#xff0c;需要确保当前电脑没有安装node&#xff0c;否则则需要先把原来的node卸载了。 下载地址&#…

Oracle-深入了解cache buffer chain

文章目录 1.Cache buffer chain介绍2.Buffer cache的工作原理3 Buffer chains4.Multi-versioning of Buffers5.Latches6.诊断CBC latch等待7.解决 CBC Latch等待 1.Cache buffer chain介绍 经常看到会话等待事件“latch&#xff1a;cache buffers chain”。 如果想知道意味着什…