首页 > 其他分享 >vue3.0之emit的使用

vue3.0之emit的使用

时间:2023-06-26 19:00:55浏览次数:35  
标签:函数 自定义 vue3.0 使用 组件 close login emit

主要用于跨组件传输数据,emit可以调用父组件中的自定义函数。

使用方法

let emit = defineEmits(['父组件自定义函数1', '父组件自定义函数2', '...'])

// 调用父组件自定义函数的执行
emit('父组件自定义函数')

主要逻辑

  1. 在父组件中定义一个自定义函数
<template>
<Login v-if="is_login" @close="close_login"/>
</template>

<script>
const close_login = () => {
  console.log('我是父组件自定义函数的close')
}
</script>

比如自定义函数为 close,它会执行close_login函数
2. 在子组件中调用

<template>
<button @click="my_click">点我执行父组件</button>
</template>

<script>
let emit = defineEmits(['close'])

// 这样就会调用父组件中的close自定义函数,自定义函数又指向了close_login这个父组件中定义的函数,所以最终会执行close_login函数
const my_click = () => {
  emit('close')
}
</script>

标签:函数,自定义,vue3.0,使用,组件,close,login,emit
From: https://www.cnblogs.com/smyz/p/17506506.html

相关文章

  • vue3.0之cookies的操作
    安装npminstallvue-cookiesimportVueCookiesfrom'vue-cookies'constcookies=VueCookiescookies.set('key值','字符串或变量','7d')//7d代表时间,存放7天cookies.get('key值')//取出key值对应的数据cookies.remove('ke......
  • 何时使用Kafka而不是RabbitMQ
    Kafka和RabbitMQ都是流行的开源消息系统,它们可以在分布式系统中实现数据的可靠传输和处理。Kafka和RabbitMQ有各自的优势和特点,它们适用于不同的场景和需求。本文将比较Kafka和RabbitMQ的主要区别,并分析何时使用Kafka而不是RabbitMQ。影响因素可扩展性:Kafka旨在......
  • linux下docker安装与使用
    linux下docker安装1.安装依赖包执行命令:yuminstall-yyum-utilsdevice-mapper-persistent-datalvm22.安装docker执行命令:yuminstall-ydocker3.启动和关闭docker启动:systemctlstartdocker关闭:systemctlstopdocker......
  • SQLServer Core 序列号使用CPU限制的处理
    SQLServerCore序列号使用CPU限制的处理背景有客户是SQLSERVER的数据库.说要进行一下压测.这边趁着最后进行一下环境的基础搭建工作.然后在全闪的环境上面搭建了一个Windows2019+SQL2019的环境发现一个挺好的地方.SQLSERVER会提示,如果使用enterprise的序列号的话仅能......
  • linux下redis安装与使用
    linux下redis安装与使用一、redis安装1.上传reids压缩包到任意目录,一般与mysql数据库放一起。/usr/src2.redis压缩包解压tarxvfredis-7.0.4.tar.gz3.用gcc编译C语言,先安装gccyuminstall–ygcc4.进入到解压后的redis目录下,执行编译make5.执行安装命令makeinstall默认安装在:/u......
  • QT样式表使用
    https://blog.csdn.net/qq_32348883/article/details/1226868321.前言QT使用样式表通常有三种方式:1.在UI设计器---QtDesigner内添加并设置样式;优点:直观显示。缺点:样式比较多时,不利于检查样式是否编写错误。同时不可以二次修改,即界面显示完毕后无法通过此方法修改界......
  • 一个使用simulink搭建的三通道交错并联双向buck-boost变换器。它采用电压外环、三电流
    这是一个使用simulink搭建的三通道交错并联双向buck-boost变换器。它采用电压外环、三电流内环和载波移相120°的控制方式。该变换器在buck模式和boost模式之间切换时,能够实现能量的双向流动,而且不会产生过压和过流问题。交错并联的拓扑结构可以减少电感电流的纹波,减小每相电感的体......
  • 9. 使用JdbcTemplate【从零开始学Spring Boot】
      整体步骤:(1)  在pom.xml加入jdbcTemplate的依赖;(2)  编写DemoDao类,声明为:@Repository,引入JdbcTemplate(3)  编写DemoService类,引入DemoDao进行使用(4)  编写Demo2Controller进行简单测试。 具体操作流程如下: 使用JdbcTemplate类需要加入(如果在JPA已经加入的话,这......
  • 8. 使用JPA保存数据【从零开始学Spring Boot】
    在看这一篇文档的话,需要先配置好JPA–Hibernate。      总体步骤:(1)  创建实体类Demo,如果已经存在,可以忽略。(2)  创建jparepository类操作持久化。(3)  创建service类。(4)  创建restful请求类。(5)  测试 代码如下:com.kfit.test.bean.Demo:package......
  • fiddler的介绍和使用
    一、fiddler工作原理Fiddler是以代理WEB服务器的形式工作的,浏览器与服务器之间通过建立TCP连接以HTTP协议进行通信,浏览器默认通过自己发送HTTP请求到服务器,它使用代理地址:127.0.0.1,端口:8888.当Fiddler开启会自动设置代理,退出的时候它会自动注销代理,这样就不会影响别的......