iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中可以绑定多个事件吗
  • 139
分享到

vue中可以绑定多个事件吗

vue绑定事件绑定多个事件多事件绑定 2022-11-13 18:11:05 139人浏览 八月长安
摘要

目录Vue可以绑定多个事件吗第一种第二种vue事件绑定的原理1.1 原生 dom 的绑定1.2 组件中绑定事件1.3 $on 是怎么实现的vue可以绑定多个事件吗 标签绑定一个事件处

vue可以绑定多个事件吗

标签绑定一个事件处理函数,然后在相应的事件处理函数中调用想要触发的多个处理函数

以下两种方案,都可以实施

第一种

<button id="test" @click="test1">按钮</button>
new Vue({
    el:"#test",
    data:"",
    methods:{
        test1:function(){
            alert("test1");
            this.test2();
            this.test3();
        },
        test2:function(){
            alert("test2");
        },
        test3:function(){
            alert("test3");
        }
    }
})

第二种

绑定多个事件时,事件之间使用分号“;”分开即可

<el-button type="primary" size="small" @click="add1();add2();">123</el-button>

去methods中添加事件的函数

methods:{
    add1(){
        console.log(123)
    },
    add2(){
        console.log(456)
    },
    }

vue事件绑定的原理

之前我搜这个原理的时候,好多文章,都只写了两句话:

  • 原生事件绑定是通过addEventListener绑定给真实元素的。
  • 组件事件绑定是通过Vue自定义的key$on实现的。

那具体是怎么实现的呢, 没有说?

就现在具体看一下。

// 原生事件绑定
<div @click="fn()"></div>
// 组件绑定
<my-component @click.native="fn" @click="fn1"></my- component>

原理:

事件的编译:

let compiler = require('vue-template-compiler'); //vue-loader
let r1 = compiler.compile('<div @click="fn()"></div>'); 
let r2 = compiler.compile('<my-component @click.native="fn" @click="fn1"></my- component>'); console.log(r1); 
// {on:{click}} console.log(r2); 
// {nativeOn:{click},on:{click}}

两者编译出来不一样

// 前者
with (this){return _c('div',{on:{"click":function($event){return fn()}}})}
// 后者
with (this){return _c('my-component',{on:{"click":fn1},nativeOn:{"click":function($event){return fn($event)}}})}

在这里插入图片描述

1.1 原生 dom 的绑定

  • Vue 在创建真是 dom 时会调用 createElm ,默认会调用 invokeCreateHooks
  • 会遍历当前平台下相对的属性处理代码,其中就有 updateDOMListeners 方法,内部会传入 add 方法

源码

function updateDOMListeners (oldVnode: VNodeWithData, vnode: VNodeWithData) { 
	if (isUndef(oldVnode.data.on) && isUndef(vnode.data.on)) { return }
	const on = vnode.data.on || {} const oldOn = oldVnode.data.on || {} 
	target = vnode.elm 
	nORMalizeEvents(on) 
	updateListeners(on, oldOn, add, remove, createOnceHandler, vnode.context) 
	target = undefined 
}
function add ( 
	name: string, 
	handler: Function, 
	capture: boolean, 
	passive: boolean 
) {
	target.addEventListener( // 给当前的dom添加事件 
		name, 
		handler, 
		supportsPassive 
		? {  capture, passive  } 
		: capture 
	) 
}

1.2 组件中绑定事件

export function updateComponentListeners ( 
	vm: Component, 
	listeners: Object, 
	oldListeners: ?Object 
) {
	target = vm updateListeners(
		listeners, oldListeners || {}, 
		add, 
		remove,
		createOnceHandler, vm)
		target = undefined 
}
function add (event, fn) { 
	target.$on(event, fn) 
}

组件绑定事件是通过 vue 中自定义的 $on 方法来实现的

1.3 $on 是怎么实现的

vm.$on( event, callback )

作用:

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

原理:

$on是采用了经典的发布订阅者设计模式,首先定义一个事件中心,通过$on订阅事件,将事件存储在事件中心里面,然后通过$emit触发事件中心里面存储的订阅事件。

Vue.prototype.$on = function (event, fn) {
    const vm: Component = this
    if (Array.isArray(event)) {
        for (let i = 0, l = event.length; i < l; i++) {
            this.$on(event[i], fn)
        }
    } else {
        (vm._events[event] || (vm._events[event] = [])).push(fn)
    }
    return vm
}

看代码,逻辑很简单,$on函数接收俩个参数,第一个是订阅的事件名,可以是多个,如果是多个就传入一个事件名数组。另一个是回调函数。

首先判断传入的事件是不是一个数组,如果是,那么遍历这个数组,将数组中的每一个事件都递归调用$on方法将其作为单个事件订阅。

如过不是数组,那就当做单个事件名来处理,以该事件名作为key,先尝试在当前实例的_events属性中获取其对应的事件列表,如果获取不到就给其赋空数组为默认值,并将第二个参数回调函数添加进去。

多说一句,实例的_events是什么?这就是在事件初始化的时候,initEvents函数中绑定了_event属性并给其赋值为空对象。这个_events属性就是用来作为当前实例的事件中心,所有绑定在这个实例上的事件都会存储在事件中心_events属性中。

这就是$on的内部原理。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中可以绑定多个事件吗

本文链接: https://www.lsjlt.com/news/169306.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中可以绑定多个事件吗
    目录vue可以绑定多个事件吗第一种第二种vue事件绑定的原理1.1 原生 dom 的绑定1.2 组件中绑定事件1.3 $on 是怎么实现的vue可以绑定多个事件吗 标签绑定一个事件处...
    99+
    2022-11-13
    vue绑定事件 绑定多个事件 多事件绑定
  • jquery中多个元素可不可以绑定一个事件
    这篇文章将为大家详细讲解有关jquery中多个元素可不可以绑定一个事件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 jquery中多个元素可...
    99+
    2024-04-02
  • vue单个元素绑定多个事件问题(例如点击绑定多个事件方法)
    目录vue单个元素绑定多个事件举个例子vue单个元素绑定多个相同事件 与vue中如何获取event对象总结vue单个元素绑定多个事件 在vue中 给单个元素绑定不同的事件同时去操作不...
    99+
    2023-05-16
    vue绑定事件 单元素绑定多事件 vue事件绑定
  • jquery可以为按钮绑定点击事件吗
    本教程操作环境:windows7系统、jquery3.6版本、Dell G3电脑。在jquery中,可以利用click()或dblclick()函数来为按钮绑定点击事件。jquery为按钮绑定点击事件步骤1:利用选择器选取按钮元素对象语法:...
    99+
    2023-05-14
    jquery javascript
  • 云服务器可以绑定多个域名吗
    云服务器可以绑定多个域名。以下是绑定多个域名的步骤: 首先,使用 Apache Web服务器来绑定多个域名,具体方法: a. 在 Apache Web服务器上输入以下命令: @echo off 以下是一个示例操作,使用 Apache W...
    99+
    2023-10-26
    多个 绑定 服务器
  • 弹性云主机可以绑定多个ip吗
    是可以的,弹性云主机可以绑定多个ip,但是我们不建议这样操作。如果需要配置多个公网IP,则需要您手工配置路由策略,配置路由策略这一块比较麻烦,配置出错就会导致无法访问,因此建议可以多买几台弹性云主机,会比较好一些。弹性公网IP绑定云主机操作...
    99+
    2024-04-02
  • js中如何使用事件on动态绑定数据以及绑定多个事件
    这篇文章将为大家详细讲解有关js中如何使用事件on动态绑定数据以及绑定多个事件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一.on('clcik')与$...
    99+
    2024-04-02
  • jQuery如何绑定多个事件?
    ...
    99+
    2024-04-02
  • jQuery绑定点击事件与改变事件的方式总结及多个元素绑定多个事件
    目录1. 绑定click点击事件的几种方式:2. 绑定监听改变事件的几种方式:3. 多个事件绑定多个元素(与上方html演示页面不关联):总结简单的html页面: <!DOCT...
    99+
    2022-12-14
    jquery绑定点击事件与改变事件 jq设置点击事件 jQuery绑定点击事件
  • 一台云服务器可以绑定多个弹性网卡吗
    是的,一台云服务器可以绑定多个弹性网卡。在这种情况下,云服务器上的每个虚拟计算节点都会与其所连接的多个物理服务器进行连接。这意味着,云服务器可以提供多个网卡,每个网卡可以与一个或多个物理服务器进行通信。 这种方法也被称为负载平衡或多租户技...
    99+
    2023-10-27
    多个 一台 绑定
  • 一个虚拟机可以绑定多少个域名
    不同服务商、不同不同类型的虚拟主机,其可以绑定的域名数量是不同的,虚拟机主机的域名绑定数量主要是看服务商供的相关配置来决定,配置越高其可以绑定的域名数量越多,一般情况下虚拟主机最多可以绑定的域名数量为8个至15个不等。...
    99+
    2024-04-02
  • vue中的select绑定多个值
    目录vue select绑定多个值vue el-select 绑定id值vue select绑定多个值 不再通过v-model和value进行绑定 而是通过绑定索引值Index 然后...
    99+
    2024-04-02
  • 每个域名可以绑定多少个小程序
    每个域名最多可以绑定20小程序根据小程序支持内嵌网页文档说明,文档中对域名绑定小程序限制如下:每个小程序帐号仅支持配置最多20个域名;各类型域名仅支持绑定最多20个小程序;每个小程序一年内最多支持修改50次域名;...
    99+
    2024-04-02
  • Vue中的事件绑定与解绑方式
    目录事件绑定基础知识使用场景注意事项v-on 绑定事件语法实例$ref绑定事件语法实例事件解绑语法实例 总结事件绑定 基础知识 使用场景 子组件==>父组件传数据在父...
    99+
    2022-11-13
    Vue 事件绑定 Vue 事件解绑 Vue 事件
  • 一台云服务器可以绑定多个弹性网卡吗安全吗
    首先,要确保设备和服务都被授权。如果你的设备和服务都没有被授权,那么云服务器就不会允许你绑定弹性网卡。因此,在购买云服务器时,需要确保设备和服务都被授权。 其次,需要了解云服务器的安全设置。通常,云服务器会设置密码保护和认证机制,以确保数...
    99+
    2023-10-28
    多个 一台 绑定
  • vue中v-on可以监听多个方法吗
    在vue中v-on是提供的事件绑定机制,它是可以用来监听多个方法的,能够使用@替代v-on,比如:“”,而以下是v-on监听多个方法的示例。示例:...
    99+
    2024-04-02
  • 一个主机可以绑定多少弹性ip
    一个主机实例只能同时绑定1个弹性公网IP,并且一个弹性公网IP同一时刻只能绑定到一个主机实例上。弹性公网IP绑定云主机操作步骤:1、登录云主机控制台。2、在左侧导航窗格中,单击【弹性公网 IP】。3、在需要绑定云主机的EIP列表项后,单击【...
    99+
    2024-04-02
  • 一台云服务器可以绑定多个eip
    如果您要绑定多个 IP,可以考虑使用以下方法: 使用 HTTP Server:通常情况下,您可以使用以下命令将多个 IP 绑定在同一台云服务器上: ServerName http://example.com Address xxx....
    99+
    2023-10-26
    多个 一台 绑定
  • 同一个域名可以绑定多少个ip地址
    一般情况下,一个域名同时只能绑定一个ip地址,因为在用户访问过程中,域名是指向某一个具体的ip地址,而不会同时访问多个ip地址;一个ip地址则可以绑定无数个域名。...
    99+
    2024-04-02
  • vue中怎么实现事件绑定
    本篇文章为大家展示了vue中怎么实现事件绑定,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。一、在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作