在 <script setup> 中使用 defineEmits 触发自定义事件传递数据(子传父)

本文主要是介绍在 <script setup> 中使用 defineEmits 触发自定义事件传递数据(子传父),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

  1. 在子组件中导入 defineEmits:在 <script setup> 的顶部,你需要导入 defineEmits 函数。

    import { defineEmits } from 'vue';
  2. 定义自定义事件:使用 defineEmits 函数定义你想要触发的自定义事件。你可以传递一个事件名称的数组作为参数。

    const emit = defineEmits(['custom-event']);

  3. 触发自定义事件并传递数据:在组件的方法中,你可以使用 emit 函数来触发自定义事件,并传递所需的数据。数据可以是任何类型,例如字符串、对象或数组。

    const handleClick = () => {  emit('custom-event', { message: 'Hello from child component!' });  
    };

  4. 在模板中使用事件:在模板中,你可以使用 @ 符号监听自定义事件,并指定一个处理程序来处理事件触发时的情况。处理程序可以接收传递的数据作为参数。

    <template>  <button @click="handleClick">触发自定义事件</button>  
    </template>

  5. 在父组件的模板中,使用 @ 符号来监听子组件触发的自定义事件,并在事件处理程序中接收传递的数据。

    父组件模板:

    <template>  <ChildComponent @custom-event="handleCustomEvent" />  
    </template>

    父组件:

    import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent  },  methods: {  handleCustomEvent(data) {  // 在这里接收子组件传递的数据  console.log(data); // 输出传递的数据  }  }  
    };

    在上述示例中,父组件通过 @custom-event 监听子组件触发的 custom-event 事件。当事件触发时,父组件的 handleCustomEvent 方法将被调用,并接收传递的数据作为参数。你可以根据实际需求对数据进行处理或使用。

这篇关于在 <script setup> 中使用 defineEmits 触发自定义事件传递数据(子传父)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/604086

相关文章

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

Java使用Mail构建邮件功能的完整指南

《Java使用Mail构建邮件功能的完整指南》JavaMailAPI是一个功能强大的工具,它可以帮助开发者轻松实现邮件的发送与接收功能,本文将介绍如何使用JavaMail发送和接收邮件,希望对大家有所... 目录1、简述2、主要特点3、发送样例3.1 发送纯文本邮件3.2 发送 html 邮件3.3 发送带

使用DeepSeek搭建个人知识库(在笔记本电脑上)

《使用DeepSeek搭建个人知识库(在笔记本电脑上)》本文介绍了如何在笔记本电脑上使用DeepSeek和开源工具搭建个人知识库,通过安装DeepSeek和RAGFlow,并使用CherryStudi... 目录部署环境软件清单安装DeepSeek安装Cherry Studio安装RAGFlow设置知识库总

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

Maven pom.xml文件中build,plugin标签的使用小结

《Mavenpom.xml文件中build,plugin标签的使用小结》本文主要介绍了Mavenpom.xml文件中build,plugin标签的使用小结,文中通过示例代码介绍的非常详细,对大家的学... 目录<build> 标签Plugins插件<build> 标签<build> 标签是 pom.XML

JavaScript中的Map用法完全指南

《JavaScript中的Map用法完全指南》:本文主要介绍JavaScript中Map用法的相关资料,通过实例讲解了Map的创建、常用方法和迭代方式,还探讨了Map与对象的区别,并通过一个例子展... 目录引言1. 创建 Map2. Map 和对象的对比3. Map 的常用方法3.1 set(key, v