Vue组件通信之二：事件监听函数$emit/$on/$off

最新推荐文章于 2024-07-24 11:30:28 发布
最新推荐文章于 2024-07-24 11:30:28 发布
阅读量3.5k 收藏
点赞数
分类专栏： Vue

在vue2.x版本中自定义时间都需要通过$emit/$on/$off函数来进行触发、监听和取消监听。

如果了解过JavaScript的设计模式-------观察者模式，一定知道dispatchEvent和addEventListener这两个方法。Vue组件中也有与之类似的模式，子组件用$emit来触发事件，父组件用 $on监听子组件的事件。

父组件也直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件；代码如下

mykefei
关注
专栏目录
vue中的监听事件（watch）
SeeU
07-29 2万+
使用watch这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理 html: 在html里写下那个事件会让触发methods让data发生变化 <input type="text" v-model="firstname" @keyup="getFullname">+ data: 这里是data里面的值 data: { firstname: "", lastname: "", ful
vue.js中子父通信
qq_44687755的博客
10-27 272
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"&gt...
Vue3-17 监听器(Watch)
最新发布
qq_36360308的博客
07-24 509
在 Vue3 的开发过程中，监听器（Watchers）是实现数据动态监听和响应的重要工具。通过灵活运用监听器，我们可以在数据变化时执行各种自定义的逻辑。接下来，让我们结合一段示例代码，深入了解 Vue3 监听器的强大功能。公众号：资小库，回复vue下载本文源码。
vue使用笔记——父子、兄弟组件之间的传值，以及$emit的奇怪用法
qq_43115213的博客
09-02 658
vue使用笔记——父子、兄弟组件之间的传值 1、父组件向子组件传值 通过props属性进行传值 <div id="emit-example-simple"> <welcome-button btnname="Click me to be welcomed"></welcome-button> </div> // 1.父组件通过自定义属性向子组件传值。子组件通过props接收对应属性。 Vue.component('welcome-button', {
Vue.js 之 组件-监听子组件事件
热门推荐
惟忆
05-16 4万+
1、监听子组件事件 前面介绍了父组件如何通过 prop 向子组件传递数据，反过来，子组件如何向父组件通信呢？ 在 Vue.js 中，这是通过自定义事件来实现的，子组件使用 $emit() 方法触发事件，父组件使用 v-on 指令监听子组件的自定义事件。 // evenName: 事件名 // args: 事件传递的参数 vm.$emit( evenName, [...args] ) <div id="app"> <child @greet="sayHello"></c
vue监听子组件事件简栗
你是人间四月天
03-31 642
vue监听子组件事件简栗: <div id="app"> <p>当前fontSize：{{number}}</p> <zhangsan :style="{ fontSize: number + 'em' }" v-on:mystyle="add" v-bind:mynumber=number &g...
解决vue bus.$emit触发第一次$on监听不到问题
10-15
在Vue.js开发中，父子组件通信是一个常见需求。Vue提供了多种方法实现组件间通信，其中Vue实例的事件总线（Event Bus）是一个轻量级事件通信机制，对于非父子关系的组件间通信尤为适用。然而，在实际开发过程中，...
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
总结来说，Vue 的 `$refs`、`$emit`、`$on`、`$once` 和 `$off` 提供了强大的组件通信能力。它们使我们可以灵活地在组件之间传递数据、响应事件，以及有效地管理事件监听器，从而构建出复杂的单页应用。在实际开发中...
Vue3从0到1开发组件前戏（中）：$emit,$on,$off替代方案
qq_35117063的博客
08-02 2321
本系列中会用到的第三方库 一、起因 上一篇文章中说过，在Vue的新版本，Vue3中删除了$on,$once,$off等方法，$emit仍然是现有 API 的一部分，因为它用于触发由父组件以声明方式附加的事件处理程序。 但是既然是组件开发，那么组件与组件之间的通信，组件与父级之间的通信肯定是少不了的，$emit方法虽然已经能满足半数以上的通信需求，但是剩下满足不了的部分，就是满足不了。所以就要用到市面上的第三方库来作为平替方案了。 Vue3迁移文档中提及:在 Vue 3 中，已经不可能使用这些 API 从组件
vue基础 - 11 （组件间的通信：event bus -- 事件车，$emit，$on，$off，封装一个事件车）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-04 824
技术名称: event bus -- 事件车 场景： 在`头部组件`中点击搜索按钮， 需要把输入框的值传递给`商品组件` 这些组件的共同点： 同一个vue对象管理的， 这些组件中的`this.$root` (root:根源,根) 是同一个对象 Vue对象提供3个方法： - `$emit('事件名', 参数)`：触发一个事件 - `$on(监听事件名, 回调函数)`：监听指定事件触发 - `$off(监听事件)`： 删除事件的监听 例子： 1、触发事件： Header....
vue2开发中$emit 、$on 、$once 、$off 的使用, vue中$root、$refs、$parent 的使用
zhouzuoluo的博客
06-02 1万+
一、vue2开发中$emit 、$on 、$once 、$off 的使用 简单概述： 1、vm.$emit(eventName,callback) 和$on(eventName,callback) 一般结合使用。使用$emit触发当前实例上的自定义事件（并将附加参数都传给监听器回调），使用$on 监听该事件并调用回调函数。这两个事件方法可以结合props 属性实现父子组件双向传参。...
Vue如何实现监听组件原生事件
10-15
主要介绍了Vue如何实现监听组件原生事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue加载完成后的回调函数方法
12-10
如下所示： var c = new Vue({ el: "#cartoon", data: data, mounted: { alert("vue加载完成"); } }); 以上这篇vue加载完成后的回调函数方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue 事件处理监听事件
wanglekv的博客
09-01 1171
methods:{say(data){}// 后台打印：hi。
Vue2 框架整理：子组件向父组件传递数据，$emit() 或 v-on
freedomVenly的博客
07-02 2618
当子组件向父组件传递数据的时候，需要的是自定义事件： $on &amp;amp; $emit 子组件用$emit()触发事件， 父组件用$on() 监听子组件的事件 或者父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件： $emit() 中第一个参数是方法的名称，后面都是根据需求设定要传递的数据 比如： （下面所有 v-on 简写为语法糖@） &amp;lt...
Vue 事件相关实例方法---on/emit/off/once
weixin_30731287的博客
07-07 232
一、初始位置 平常项目中写逻辑，避免不了注册/触发各种事件 今天来研究下 Vue 中，我们平常用到的关于 on/emit/off/once 的实现原理 关于事件的方法，是在 Vue 项目下面文件中的 eventsMixin 注册的 src/core/instance/index.js import { initMixin } from './init' import { stateMixin } ...
Vue中父组件监听子组件事件时$emit的用法
yhj198927的博客
04-20 3654
$emit使用时需要满足以下两个条件： 1.父组件可以通过 Prop 向子组件传递数据 2.子组件可以使用 $emit方法监听父组件的自定义事件。 $emit 参数： {string} eventName [...args] eventName:指父组件注册的事件名称； args:父组件注册的事件参数，参数数量不限 请看如下代码： 1.父组件 <template> <div> <div style="font-weigh
vue中@hook使用技巧---监听本组件或子组件的生命周期
yiyueqinghui的博客
09-22 1652
1、在同一个组件中，监听生命周期 vue 文档在 程序化的事件侦听器 一节中讲了怎么注册/停止一个监听事件。 简单语法如下： this.$on/$once('hook:生命周期'，callback) vue组件的任意一个生命周期都可以被监听 除了官方文档中的例子，我们最常用到的是定时器的使用与销毁。 export default{ data(){ timer:null }, mounted(){ this.timer = setInterval(()=>{
$on $off $emit
08-13
在Vue中，$on、$off、$emit是一些用于组件间通信的方法。可以通过使用$bus实例来传递非父子组件之间的数据。比如，使用$emit方法发送事件，使用$on方法监听事件，使用$off方法移除事件的绑定。 在子组件中，可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值