17 Vue3中的emit传值

概述

We have already seen that props are used to pass data from a parent component to a child component. To pass data from a child component back to a parent component, Vue offers custom events.

我们已经看到,道具用于将数据从父组件传递到子组件。为了将数据从子组件传递回父组件,Vue 提供了自定义事件。

In a component, we can emit an event using the e m i t m e t h o d ; w i t h t h i s . emit method; with this. emitmethod;withthis.emit(‘eventName’, payload) within <script>; or just with $emit within the template section.

在组件中,我们可以使用 e m i t 方法、在 ‘ < s c r i p t > ‘ 中使用 t h i s . emit 方法、在 `<script>` 中使用 this. emit方法、在<script>中使用this.emit(‘eventName’, payload) 或在模板部分使用 $emit 来发射事件。

Assuming we have got a reactive instance property, this.message, we could emit a send event with the message value in the script section using this.$emit. This could be the basis for a MessageEditor component:

假设我们已经有了一个反应式实例属性 this.message,我们就可以在脚本部分使用 this.$emit 发送一个带有消息值的发送事件。这可以作为 MessageEditor 组件的基础:

<script>
export default {data () {return {message: null}},methods: {send() {this.$emit('send', this.message);}}
}
</script>

In the same scenario, we could trigger a send event from the template section as follows:

在同样的情况下,我们可以从模板部分触发发送事件,如下所示:

<template><div><input v-model="message" /><button @click="$emit('send', message)">Emit inline</button></div>
</template>

From a parent component, we can use v-on:event-name or the shorthand @event-name. event-name must match the name passed to $emit. Note eventName and event-name are not equivalent.

在父组件中,我们可以使用 v-on:event-name 或快捷方式 @event-name。event-name 必须与传递给 $emit 的名称一致。请注意,eventName 和 event-name 并不等同。

For instance, in the parent component we want to listen to the send event and modify some data accordingly. We bind @send with some event handler logic, which can be a JavaScript expression or a method declared using methods.

例如,在父组件中,我们要监听发送事件并相应地修改一些数据。我们将 @send 与一些事件处理逻辑绑定,这些逻辑可以是 JavaScript 表达式,也可以是使用 methods 声明的方法。

Vue will trigger this event handler and pass the event’s payload object to it when applicable. You can use $event in the JavaScript expression of the template as the payload, as shown in the following example of the template section in App:

Vue 将触发该事件处理程序,并在适用时将事件的有效载荷对象传递给它。您可以在模板的 JavaScript 表达式中使用 $event 作为有效载荷,如以下 App.Vue 中模板部分的示例所示:

<template><div id="app"><p>Message: {{ parentMessage }}</p><MessageEditor @send="parentMessage = $event" /><button @click="parentMessage = null">Reset</button></div>
</template>

We can also extract the JavaScript expression to a component’s updateParentMessage method and bind it as follows:

我们还可以将 JavaScript 表达式提取到组件的 updateParentMessage 方法中,并将其绑定如下:

<template><div id="app"><p>Message: {{ parentMessage }}</p><MessageEditor @send="updateParentMessage" /><button @click="parentMessage = null">Reset</button></div>
</template>
<script>
import MessageEditor from './components/MessageEditor.vue'
export default {components: {MessageEditor},data() {return {parentMessage: null}},methods: {updateParentMessage(newMessage) {this.parentMessage = newMessage}}
}
</script>

Custom events support passing any JavaScript type as the payload. The event name, however, must be a String.

自定义事件支持传递任何 JavaScript 类型作为有效载荷。不过,事件名称必须是字符串。

在setup中使用事件

If you use <script setup>, since there is no component’s options object, we can’t define custom events using the emits field. Instead, we use the defineEmits() function from the vue package and pass all the relevant events’ definitions to it.

如果使用 <script setup>,由于没有组件的选项对象,我们就无法使用 emits 字段定义自定义事件。相反,我们可以使用 vue 软件包中的 defineEmits() 函数,并将所有相关事件的定义传递给它。

For example, in the MessageEditor component, we can rewrite the event-registering functionality with defineEmits() as follows:

例如,在 MessageEditor 组件中,我们可以使用 defineEmits() 重写事件注册功能如下:

<template><div><input v-model="message"/><!--点击的适合,手动传递值--><button @click="$emit('send', message)">Emit inline</button></div>
</template><script setup>
import {defineEmits, ref} from 'vue'const message = ref(null)// 定义事件
const emits = defineEmits(['send'])// 通过事件向父组件传递值
emits('send', message.value);
</script>

defineEmits() returns a function that we can trigger in the same concept with this.$emits. We will certainly need to use ref() to declare a reactive data message for this component, the usage.

defineEmits()会返回一个函数,我们可以用与 this.$emits 相同的概念来触发它。我们肯定需要使用 ref() 来为该组件声明反应式数据消息。

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

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

相关文章

【TB作品】51单片机 实物+仿真-电子拔河游戏_亚博 BST-M51

代码工程。 http://dt4.8tupian.net/2/28880a66b12880.pg3这段代码是用于一个数字拔河游戏的嵌入式系统&#xff0c;采用了基于8051架构的单片机&#xff0c;使用Keil C51编译器。 主要功能包括&#xff1a; 数码管显示&#xff1a;使用了四个数码管&#xff08;通过P2的控制…

React Hooks解决了什么问题?

前言 之前被面试官问到hooks解决了什么问题&#xff0c;当时就说了一部分&#xff0c;还是决定总结一下&#xff0c;毕竟临场发挥肯定会说不全。 React Hooks React Hooks 是 React 16.8 引入的一项重要功能&#xff0c;它解决了一些在使用类组件时存在的问题&#xff0c;并…

Redis分布式锁和Java锁的区别

Redis分布式锁和Java锁的主要区别在于它们的适用范围和实现机制。 适用范围&#xff1a; 在多机部署的情况下&#xff0c;Java锁只能锁定当前机器上的请求&#xff0c;无法对其他机器的请求进行加锁。这是因为Java锁使用的是JVM的机制&#xff0c;只在本机生效。然而&#xf…

【华为数据之道学习笔记】5-4 数据入湖方式

数据入湖遵循华为信息架构&#xff0c;以逻辑数据实体为粒度入湖&#xff0c;逻辑数据实体在首次入湖时应该考虑信息的完整性。原则上&#xff0c;一个逻辑数据实体的所有属性应该一次性进湖&#xff0c;避免一个逻辑实体多次入湖&#xff0c;增加入湖工作量。 数据入湖的方式…

配置 vim 默认显示行号 行数 :set number

vi ~/.vimrc 最后添加一行 :set number保存退出&#xff0c;再次 vim 打开文件&#xff0c;默认就会显示行号了

Feign-实现Feign最佳实践

目录 一、实现最佳实践的步骤&#xff08;方式二&#xff09; 1.1 首先创建一个module&#xff0c;命名为feign-api&#xff0c;然后引入feign的starter依赖 1.2.将order-service中编写的UserClient、User、DefaultFeignConfiguration都复制到feign-api项目 1.3.在order-se…

Kali Linux安装Xrdp远程桌面工具结合内网穿透实现远程访问Kali桌面

文章目录 前言1. Kali 安装Xrdp2. 本地远程Kali桌面3. Kali 安装Cpolar 内网穿透4. 配置公网远程地址5. 公网远程Kali桌面连接6. 固定连接公网地址7. 固定地址连接测试 前言 Kali远程桌面的好处在于&#xff0c;它允许用户从远程位置访问Kali系统&#xff0c;而无需直接物理访…

vulnhub7

靶机地址&#xff1a;https://download.vulnhub.com/hackerkid/Hacker_Kid-v1.0.1.ova 这次的靶机风格比较偏向 OSCP 风格&#xff0c;区别于传统的 CTF 类型的靶机&#xff0c;只需要提权到 root 即可&#xff0c;而且这次打靶确实触碰到很多知识盲区了 提示&#xff1a;本地…

安卓开发学习---kotlin版---笔记(二)

UI学习 UI分类 安卓的UI分为两大类&#xff1a;一类叫做View视图&#xff0c;一类叫做ViewGroup容器 View视图&#xff1a;TextView,Button,ImageView都是常见的视图ViewGroup容器&#xff1a;内部尅承载、放置、添加View视图的容器 布局方式 安卓布局主要有&#xff1a;线…

【Qt图书管理系统】4.系统设计与详细设计

文章目录 核心流程图软件架构设计流程图软件开发类图及功能点 核心流程图 用户登录图书查询图书借阅图书归还账户管理 软件架构设计 流程图 软件开发类图及功能点 Dlg_Login 登录界面 Cell_Main 主窗体 Cell_MyBook 我的书籍 Cell_BookMgr 书籍管理 Cell_RecoredMgr 借阅记录…

FC-13A(用于汽车应用的kHz范围晶体单元,低轮廓贴片)

FC-13A晶体非常适合用在汽车导航系统设计中的应用&#xff0c;是一种具有优异的频率性能和AEC-Q200标准认证的汽车工业级高精度晶体,FC-13A是一款尺寸为3.2 1.5 0.9mm&#xff0c;频率范围32.768KHz耐高温晶振&#xff0c;频率温度系数仅为-0.04ppm/℃&#xff0c;并且其老化…

2023年四川网信人才技能大赛 决赛 实操赛Web ezbbs Writeup

题目是一个BSS论坛&#xff0c;如图 尝试注册发现注册未开放 题目给了jar包以及给了一个提示条件竞争绕过&#xff0c;分析源码&#xff1a; /register、/login接口都在com.my.bbs.controller.rest.BBSUserController 首先cacheUser是BBSUser类型的私有属性&#xff0c;并且reg…

Socket全连接、半连接队列与Listen函数的Backlog参数深度解析

当涉及到网络编程和Socket通信时&#xff0c;理解全连接队列和半连接队列是至关重要的。它们是操作系统中用于管理传入连接请求的两个关键概念&#xff0c;而listen()函数中的backlog参数则直接涉及到这两个队列的调节和管理。 全连接队列和半连接队列 全连接队列&#xff08…

【Java】智慧工地系统:让建筑行业管理更简单

概述 智慧工地管理平台面向房建、能源、交通各类工地的管理者&#xff0c;通过AI视频、物联感知技术对工地场景中的施工机械、建筑材料、施工规范、施工环境监管、完善施工现场项目管控。实现项目管控、特种设备管理、绿色施工、工地巡检等业务功能&#xff0c;沉淀工地监管数…

python如何通过自身日志系统读写日志文件

在Python中&#xff0c;可以使用logging模块来实现日志的读写操作。 首先&#xff0c;在代码中引入logging模块&#xff1a; import logging然后&#xff0c;创建一个日志记录器&#xff0c;你可以指定记录器的名称&#xff0c;这样你就可以在代码中通过名称来获取这个日志记…

大一python题库刷题训练,大一python填空题题库

大家好&#xff0c;给大家分享一下大一python题库及答案和分析&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 这篇文章主要介绍了大一python上机题库及答案&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。希望大家阅读完…

HiveSql语法优化二 :join算法

Hive拥有多种join算法&#xff0c;包括Common Join&#xff0c;Map Join&#xff0c;Bucket Map Join&#xff0c;Sort Merge Buckt Map Join等&#xff0c;下面对每种join算法做简要说明&#xff1a; Common Join Common Join是Hive中最稳定的join算法&#xff0c;其通过一个M…

python 连接SQL server 请用pymssql连接,千万别用pyodbc

pymssql官方介绍文档 python 使用 pymssql连接 SQL server 代码示例&#xff1a; 安装pymssql包&#xff1a; pip install pymssql代码&#xff1a; import pymssqldef conn_sqlserver_demo():# 连接字符串示例&#xff08;根据您的配置进行修改&#xff09;conn Nonetry:co…

运维笔记之centos7安装mysql数据库

安装wget [rootstem-mysql ~]# yum install wget -y... 总下载量&#xff1a;547 k 安装大小&#xff1a;2.0 M Downloading packages: wget-1.14-18.el7_6.1.x86_64.rpm …

python中的随机选择和随机采样

python中的随机选择和随机采样 简单使用python中numpy.random.choice()、random.choice()、random.choices()区别介绍numpy中choice()random中choice()和choices()random.sample() 简单使用 生成随机整数&#xff0c;请使用 random.randint() &#xff0c;例如范围为[0-10]&am…