Vue事件解读之$emit

最新推荐文章于 2024-08-22 11:25:48 发布
最新推荐文章于 2024-08-22 11:25:48 发布
阅读量2.5w 收藏 4
点赞数 2
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/randy_shenyp/article/details/64233570
版权
本文深入探讨Vue中的自定义事件，重点解析$emit的使用。通过v-on或@语法糖绑定DOM事件，而自定义事件主要用于组件间通信。Vue 2.0中，$emit用于触发实例上的事件，传入事件名和可选参数。它返回的布尔值指示是否有监听器及处理程序的返回值。举例说明了如何在App.vue父组件中通过v-on监听子组件的自定义事件并响应。
摘要由CSDN通过智能技术生成

Vue事件分两部分，一是DOM绑定事件，二是自定义事件。

DOM事件

在Vue中可通过v-on指令或事件语法糖@来为DOM元素绑定事件

<div v-on:click="doSomething"></div>
<div @click="doSomething"></div>

自定义事件

Vue自定义事件是为组件间通信设计，自定义事件提供$on、$off、$once、$emit、$broadcast、$dispatch 几个 api,只是在2.0版本中，$broadcast、$dispatch已不再使用。

$emit
参考Vue文档$emit

vm.$emit( event, […args] )
参数：
{string} event
[…args]//可选参数

最低0.47元/天 解锁文章
_FEE
关注
专栏目录
详解vue中this.$emit()的返回值是什么
10-17
主要介绍了详解vue中this.$emit()的返回值是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue之$emit返回值
shidouyu的专栏
08-27 6508
vue之$emit返回值 应用场景：子组件调用父组件的方法并获取到父组件方法的返回值 // 父组件 getdata(){ return data } // 子组件 let data = this.$emit("getdata", bounds) return data 这种写法是错误的，拿到的data是指向方法的this，无法获取到data 正确写法： // 父组件 getdata(bounds, callback){ callback(data) } // 子组件 let d
Vue2的16种传参通信方式
最新发布
cnzzs的博客
08-22 419
前言先直入主题列出有哪些传参方式，下面再通过事例一一讲解。props(父传子)$emit与v-on(子传父)EventBus(兄弟传参).sync与update:(父子双向)v-model(父子双向)ref$children与$parent$attrs与$listeners(爷孙双向)provide与inject...
Vue3 emits选项将Emit派发事件可以对参数进行验证。
qq_54753561的博客
11-30 5797
Vue3.0中使用emit发起事件时会要求当前组件记录emit事件（没有则控制台会抛出警告）。
vue 组件之间传递数据、事件监听hook、$emit验证
weixin_43294560的博客
02-14 1015
组件之间传递数据 父组件向子组件 (1)在父组件中,在子组件的标签上写上键值对,可以传递多个键值对 (1)将变量作为值传递,得使用v-bind解析 (2)使用v-bind+v-model,可以实现父组件实时传递数据 (2)子组件接收,在script中和data同级 props:['键名1','键名2',...] (3)子组件使用 {{键名}} ...
vue父子组件——$emit()事件
打代码是一天，不打代码也是一天
09-21 731
<!-- 子组件 --> <template> <div class='container'> <div>子组件</div> <button @click="btn">按钮</button> </div> </template> <script> export default { name: 'Child',
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
10-20
在深入探讨如何使用Vue.js 2.0实现分页组件并通过$emit事件监听数据传递之前，我们需要先了解Vue.js的几个核心概念，比如组件化、props、计算属性(computed)、事件监听($emit)以及插槽(slots)。 组件化是Vue.js框架...
this.$emit
07-27
this.$emit()是Vue.js中的一个方法，主要用于子组件向父组件传递数值或触发事件。通过this.$emit()方法，子组件可以向父组件发送自定义事件，并传递参数。在父组件中，可以通过监听这个自定义事件来获取子组件传递的...
Vue进阶面试题，源码解读，含Vue3源码解读
01-23
3. **组件化**：Vue的组件化思想是其强大之处，包括组件的生命周期、props的传递、自定义事件（$emit）等。 4. **计算属性与侦听器**：计算属性用于简化复杂逻辑，而侦听器可以监听数据变化并执行相应操作。 5. **...
vue.js中$emit的理解
weixin_34025051的博客
04-07 105
官网介绍比较简单 例子：$emit('increment1',[12,'kkk'])，直接看是懵逼的有没有，可以先告诉你，就是触发自定义事件increment1(或者函数名吧)，[]为参数 上案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
Vue实现非父子组件通信，关于mitt的封装。
Blog沙漏在下雨
04-22 740
在Vue中， 怎样使用mitt实现非父子之间的通信， 相对于父子之间直接通信使用props和emit发射事件， 如果层级嵌套很深，则使用 provide 和 inject 去实现通信， 但是还有一种办法， 就是之前vue2 的 全局总线bus, 但是文档提示我们在vue3中去使用emitt 和 mitt 替换他们， 最后使用了 mitt去实现， 最后封装一下.
【vue3 之 emits & $emit() 讲解 】监听子组件事件、emit事件验证、options写法、composition setup写法
热门推荐
从今年开始写写博客~~
04-03 2万+
emits 可以是数组或对象，从组件触发自定义事件，emits 可以是简单的数组，也可以是对象。 1、数组形式和对象形式的值为null，表示该emit事件无验证函数。 2、对象形式且值为函数表示该 emit 配置了事件验证 验证函数必须有return 真假值，真值表示通过验证，假值则 vue 会自动抛出 warn 警告！不 return 值默认当做失败，抛出 warn 警告！ 验证函数主要就是验证参数是否正确，并不会在 return false 时中断emit() 事件！
前端面试题——vue篇(四)
weixin_64141611的博客
09-04 656
前端面试题汇总
Vue3 emits选项将Emit派发事件可以对参数进行验证
seimeii的博客
12-23 252
定义抛出去了那些事件,可以方便看到事件 emits用法
Vue-EventBus
weixin_45203607的博客
07-13 1075
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。如果1个页面里很多组件没有任何引入和被引入关系(不是父子关系),而他们大多都是同级关系，该如何通信？ 听说EventBus,或者说或多或少都了解过，他可以在任何两个组件中进行传值，不局限于父子、祖孙或是兄弟组件，也可以说他是一种发布——订阅的设计模式。注意: 只能在一个页面里会初始化的组件之间才能通信, 因为只有组件初
Vue中的$emit的使用方法与理解
qq_34082921的博客
01-13 5977
> - 学到Vue的组件内传值时，props父传子还能理解，但是对子组件给父组件传值（也就是$emit方法），对于这个$emit我感觉有点绕，知道它的作用，但是对它的用法还是掌握不好，主要还是对于为什么这么用很疑惑。 >- 对父组件给子组件传值很简单，也很好理解。父组件给子组件传值只要在子组件标签内用V-bind写一个函数方法（也可以传参数）用props接收就可以直接使用了。但是到子组件给父组件传值就变得复杂了，首先要先在子组件标签内声明触发$emit的事件，触发条件后用$emit发送自定义事件（包含事件
vue3中emits验证
差不少的博客
07-11 2107
emit验证： 平时不太会用到 因为不会影响项目的运行，也不会报错和警告，但官方推荐使用，可以用一下 也可以在里面写判断条件： 如果emits验证中什么都不return，默认是返回一个undefined，效果等同于返回false，也是验证失败 注： emits验证失败并不会影响流程，$emit事件仍会执行，事件还是会正常发射，只会出现一个警告 ......
vue中 关于$emit的用法
qq_43170213的博客
10-08 1万+
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&g
Vue组件事件：$emit与Event Bus($on)实战解析
"本文主要介绍在Vue.js中，组件之间的事件触发($emit)以及如何使用Event Bus($on)实现跨组件通信。这两种方法在处理组件间交互时非常常见，特别是当需要传递信息或触发功能时。" 在Vue.js中，组件间的通信是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值