vue $on监听组件

2024-11-03

vue中的事件监听之——v-on vs .$on

跟着视频中老师的教学视频学vue的时候,看很多时候都用@(v-on)来监听子级emit的自定义事件,但在bus总线那块,又用.$on来监听bus自身emit的事件,v-on之间似乎相似但又不同,今天对照vue官网api学习并coding了相关代码,两者的用法与比较描述如下. v-on vm.$on 可监听普通dom的原生事件: 可监听子组件emit的自定义事件: 监听当前实例的自定义事件 vue官网相关说明截图: 由此可见,想监听vue实例自身自定义事件,只能用.$on并且这是vue实例的方法,

Vue中如何监听组件的原生事件

在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过this.$emit将事件发射到Home组件中,又在Home中监听自定义事件,比较复杂.因此,我们直接在Home中对BackTop组件进行监听,使用 .native 官网对于native的解释为: .native:监听组件根元素的原生事件代码如下: 在Home.vue中对back-top组件进行点击事件

12.vue属性.监听.组件

1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.html:++ <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="vue.js&

bootstrap源码之滚动监听组件scrollspy.js详解

其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3.菜单上必须有.nav样式 4.滚动区域的data-target与导航父级Id(一定是父级)要一致. <div id="selector" class=&qu

listview监听组件内容变化

package com.meizu.ui.gifts; import android.app.Activity; import android.content.Context; import android.text.Editable; import android.text.TextWatcher; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; impor

sencha touch list tpl 监听组件插件（2013-9-15）

插件代码 /* *list tpl模版加入按钮监控 *<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-stretched btn"><span class="x-button-icon x-shown lower" fire="showWeibo"></span></div> *fire=&quo

sencha touch Container tpl 监听组件插件(2013-9-14)

将http://www.cnblogs.com/mlzs/p/3279162.html中的功能插件化插件代码: /* *tpl模版加入按钮 *<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-stretched btn" style="visibility:{visibility}" fire="TasteUp" ><span

Pox启动及事件产生、监听分析

./pox/pox.py , Pox 实例化core=pox.core.initialize(),即为实例化POXCore类(该类是所有组件的交接点,提供组件注册功能),监听core即可监听以下事件 2.1 声明事件 _eventMixin_events = set([ UpEvent, DownEvent, GoingUpEvent, GoingDownEvent, ComponentRegistered ]) _do__launch(ar

java Gui编程事件监听机制

1. GUI编程引言以前的学习当中,我们都使用的是命令交互方式: 例如:在DOS命令行中通过javac java命令启动程序. 软件的交互的方式: 1. 命令交互方式图书管理系统 2. 图形交互方式 ava提供了专业的API用于开发图形用户界面 GUI--> Graphic User Interface 将要了解GUI API的框架结构,以及GUI组件以及组件之间的关系,容器和布局管理器,颜色,字体等. 2. GUI的分类 2.1. AWT Java1.0

javafx 监听选择变化（TabPane）

editTab.getSelectionModel().selectedIndexProperty().addListener(evnt); javafx2.0 监听树和表的选择变化 Swing中的组件都有对应的选择模型(SelectionModel)和一些对应的方法(形如:add/remove SelectionChangedListener)来监听组件选择的变化, 如JTree中有TreeSelectionModel和addTreeSelectionListener /removeTreeS

vue中给window添加滚动监听无效的解决方案

原文链接: 点我页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mounted中添加 window.addEventListener("scroll", this.handleScroll); 试了好多方法都不行,结果是我css样式写的有问题: 刚开始有用后来没用,之后排查发现是我给body设置了overflow:scroll(hidde)属

Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！

最近工作中element后台管理使用Echarts图表,本后台项目分图表模式和列表模式,使用display控制显示隐藏,这样就引出了本文的问题. 问题1:Echarts图标宽度变成100px? 问题2:怎么让Echarts图表宽度随着父元素自动适应? 网上对于这两个的解决方案大同小异,手动的记录父元素的宽度,或者侦听display属性,解决方案要么感觉极其复杂,要么治标不治本, 这两个缠绕多年的问题,我们将通过一个插件彻底完美解决它们!!! 问题探究: 问题1复现: 问题1原因: 究极原因其实出

extjs组件添加事件监听的三种方式

extjs对组件添加监听的三种方式在定义组件的配置时设置如代码中所示: Java代码 xtype : 'textarea', name : 'dataSetField', labelSeparator:'', fieldLabel:'', hideLabel: true, allowBlank: true, height: mainPanelHeight*0.8, anchor:'99%', listeners:{'blur':function(){ alert(1)

Android四大组件之Activity一（组件的概念、Intent、监听）

前言知识补充: 什么是组件? 1.它的类必须实现特定接口或继承特定类 2.需要在配置文件中配置其全类名 3.它的对象不是通过new来创建的, 而是系统自动创建的 4.它的对象具有一定的生命周期, 它的类中有对应的生命周期回调方法一.什么是Activity? Activity, 直译为活动, 它是Android定义的四大应用组件之一,也是最重要用得最多的. Activity用来提供一个能让用户操作并与之交互的界面 Activity的API: startActivity

highcharts图表组件入门教程：如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度作者:highcharts | 时间:2014-6-11 14:07:05 | [小大] | 来源:highcharts入门教程 | 阅读:4537 | 评论: 0 | 收藏 highcharts图表组件入门教程柱状图点击柱子动态更新当前数据值对应刻度名称 [摘要]: 我们来做一个比较有意思的练习,点击柱状图指定柱子时动态切换当前柱子数据值和对应的刻度名称,以此进行数据覆盖效果

Android实训案例（六）——四大组件之一BroadcastReceiver的基本使用，拨号，短信，SD卡，开机，应用安装卸载监听

Android实训案例(六)--四大组件之一BroadcastReceiver的基本使用,拨号,短信,SD卡,开机,应用安装卸载监听 Android中四大组件的使用时重中之重,我这个阶段也不奢望能把他所有的原理搞懂,但是最起码的,我要把他的各种使用方法了如指掌才行 BroadcastReceiver 接收系统的广播,比如电话,短信之类的 1.IP拨号器我们在拨打电话的时候,我们系统也会事先发送一个广播,所以我们可以用广播接收者来接收到这个广播拨打电话的时候在电话号码前面加上一些优惠的长途短号,

DSAPI多功能组件编程应用-HTTP监听服务端与客户端_指令版

前面介绍了DSAPI多功能组件编程应用-HTTP监听服务端与客户端的内容,这里介绍一个适用于更高效更快速的基于HTTP监听的服务端.客户端. 在本篇,你将见到前所未有的超简化超傻瓜式的HTTP监听服务,与前篇中的不同,在DSAPI中,指令版同时包含了服务端与客户端. 先来看一下使用方法,几乎不需要太多的说明,当然,它是支持事件的.所谓指令版,即服务端和客户端收发都是基于短字串的,比如客户端发一个“hello“,服务端收到这个指令后返回一个”Hi".为确保传输的数据有效性,默认使用Base64加密

VUE处理组件赋值 watch 监听不到赋值问题

开发中,遇到了一个BUG,做的页面类似于导航切换效果.两个组件传值. 上方导航组件 (主动) 左侧导航组件 (被动) 点击上方导航,左侧导航实现变换对应的栏目. 实现过程中,遇到了点问题.左侧导航组件监听不到值变换. 研究了几天.最终问题解决了. 解决方案: props: { currIndex: { type: String, default: "3", } }, watch: { currIndex: { handler(newValue) { //用户列表项排除掉 i

vuejs2.0实现分页组件，使用$emit进行事件监听数据传递

上一篇文章介绍了vuejs实现的简单分页,如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件. 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = '<div class="page-bar">'+ '<ul>'+ '<li v-if="cur>1"><a v-on:click="cur--

vue watch 可以监听子组件props里面属性的改变

子组件watch 可以监听其props里面属性的改变当changeFather导致calm改变时,会执行console.log('props change');

vue watch 监听element upload组件上传成功返回的url列表

因为 on-success 上传成功返回的是一个异步的结果....如果父组件需要这个结果的话必须用watch 监听然后里面建立一个 save()方法 save方法里面再调用接口传需要的上传之后的数据,,,,,,

vue $on监听组件

热门专题