Vue3自定义事件

news/2024/12/24 2:45:15/
   自定义事件是一种组件间通信的方式,它允许子组件向父组件发送信息。

子组件可以通过自定义事件向父组件传递数据以及事件,当自定义事件触发时,子组件可以借此将子组件的数据传递给父组件并使父组件对此做出相应的操作。

1.声明自定义事件

使用defineEmits()宏声明组件要发生的事件(事件名自己取),defineEmits() 的返回值是一个 ref
下面的代码为组件声明了事件 myEvent

const emit = defineEmits(['myEvent'])
2.触发与监听事件
2.1 事件触发

自定义事件可以在 template 部分中使用 $emit和在 setup 部分中使用 defineEmits() 的返回值触发。
下面例子使用按钮点击事件触发自定义事件。
template中触发:

<template><button @click="$emit('myEvent')">点我</button>
</template>

setup中触发:

<template><button @click="handleClick">点我</button>
</template><script setup>const emit = defineEmits(['myEvent'])const handleClick = () => {emit('myEvent')
}</script>
2.2 事件监听

父组件在使用子组件时,在子组件上监听自定义事件并采取相关操作。

<template><Child@my-event="handleMyEvent"></Child>
</template><script setup>
import Child from '@/components/TestChild/index.vue'const handleMyEvent = () => {console.log('555')
}</script><style lang='scss' scoped></style>
3.事件参数

有时候,我们需要在事件触发时传递特定的值。这时可以给 $emit 提供而外的参数。
下面代码中,当事件触发时,子组件向父组件传递一个参数:

<template><button @click="$emit('myEvent',10)">点我</button>
</template><script setup>const emit = defineEmits(['myEvent'])</script><style lang='scss' scoped></style>

父组件可以使用一个内联的箭头函数或组件函数方法监听事件,两种方式都可以接收到参数。
箭头函数:

<template><p>{{ num }}</p><Child@my-event="(n) => num += n"></Child>
</template><script setup>
import { ref } from 'vue';
import Child from '@/components/TestChild/index.vue'const num = ref(0)</script><style lang='scss' scoped></style>

组件函数:

<template><p>{{ num }}</p><Child@my-event="handleMyEvent"></Child>
</template><script setup>
import { ref } from 'vue';
import Child from '@/components/TestChild/index.vue'const num = ref(0)const handleMyEvent = (n) => {num.value += n
}</script><style lang='scss' scoped></style>

http://www.ppmy.cn/news/1557621.html

相关文章

Windows部署Docker及PostgreSQL数据库相关操作

一、Windows安装Docker 1.wsl安装 以管理员身份启动命令行&#xff0c;运行&#xff1a;wsl --install&#xff1b; 安装结束后&#xff0c;重启电脑&#xff0c;以管理员身份启动命令行&#xff0c;运行&#xff1a;wsl --install -d Ubuntu&#xff1b; 中间需要输入用户名…

基于Spring Boot+Vue 的高校运动会管理系统

目录 1 绪论1.1研究背景1.2 研究意义1.3 相关开发技术简介1.3.1 Vue.js1.3.2 Spring Boot1.3.3 MySQL 2 系统分析2.1 需求分析2.1.1 功能需求2.1.2 非功能需求 2.2 系统可行性分析2.2.1 经济可行性2.2.2 技术可行性2.2.3 操作可行性 3 系统概要设计系统功能描述业务流程分析 4 …

吉利前端、AI面试

诸葛耘墒的在线视频面试 1、小程序端AI视频面试 虚拟人面试官提问 视频口述回答 1、最近的两份工作经历&#xff0c;以及上一份离职原因2、在过往的工作或生活中&#xff0c;需要学习掌握一项与工作有关的技能或兴趣爱好时&#xff0c;你会运用哪些方法和诀窍&#xff0c;投入…

机器学习之偏差

机器学习中的偏差&#xff08;Bias&#xff09;是指模型的预测值与真实值之间的系统性误差&#xff0c;或者说模型无法准确捕捉数据中复杂模式的能力。偏差通常与模型的假设或学习能力有关&#xff0c;过高的偏差会导致模型的性能不佳&#xff0c;表现为欠拟合。 偏差的来源 模…

idea开发工具创建子分支到结束完成流程

以下是基于当前 master 分支进行功能开发、测试、合并到 master 并清除临时分支的完整流程。整个流程将包括命令行操作和使用 IntelliJ IDEA 工具的步骤说明&#xff0c;确保开发过程顺畅且高效。 流程概述 确保 master 分支是最新的创建功能分支在功能分支上进行开发提交并推…

Vue中<script setup></script>的主要语法元素和特性

<script setup>是 Vue 3 中引入的一种新的组件内脚本语法糖&#xff0c;它带来了更简洁、高效的组件逻辑编写方式。 以下是 <script setup> 的主要语法元素和特性&#xff1a; 1.导入和使用 直接在 <script setup> 中导入依赖&#xff0c;不需要在 compon…

服务器运行Vue项目

1.配置nodejs 1.wget获取到nodejs的压缩包 修改成自己需要的版本的下载链接。右键点击&#xff0c;复制下载链接即可。 wget https://nodejs.org/dist/v20.18.1/node-v20.18.1-linux-x64.tar.xz2.解压 tar xf node-v20.18.1-linux-x64.tar.xz3.移动目录 mkdir /usr/local/l…

robots协议

robots协议&#xff0c;也称为爬虫协议、爬虫规则、机器人协议等&#xff0c;其全称是“网络爬虫排除标准”&#xff08;Robots Exclusion Protocol&#xff09;。以下是对robots协议的详细介绍&#xff1a; 一、定义与功能 robots协议是指网站可以建立一个名为robots.txt的文…