浅谈Vue 自定义事件——原理及用法
前言
在Vue 中,对HTML的原生事件做了支持。例如:click
、focus
、change
等事件。除了原生事件外,Vue 还允许用户自定义事件。
什么是事件?什么是自定义事件?
在了解自定义事件前,先来了解什么是事件。
事件就是用户对窗口上各种组件的操作。
使用事件机制可以实现:当类对象的某个状态发生变化时,系统将会通过某种途径调用类中的有关处理这个事件的方法或者触发控件事件的对象就会调用该控件所有已注册的事件处理程序等。
来自百度百科—— 事件 (计算机术语)
事件是指被程序发现的行为或发生的事情,而且它可能会被程序处理。
来自 CSDN AndyNikolas ——在 JavaScript 中, 究竟什么是 事件,事件 是指什么?
从上面两段引用大致可以看出:计算机的事件是组件状态发生了变化,触发了对应的处理程序。
本质上就是:计算机监听某件事(Event),只要这件事发生了,就执行特定的操作。细分下来,事件(Event)分为三部分:
- 声明需要监听的事件
- 设置事件触发后的要执行的代码
- 触发监听事件
在实际开发中,第一点和第二点往往是一并设置。也就是说,如果要设置一个事件,需要做两件事情:
- 添加事件(包括声明事件、设置执行代码)
- 触发事件
Vue 如何添加自定义事件
上面说到计算机的事件由两部分组成:添加事件、触发事件。在Vue 想要添加自定义事件也是如此。
添加事件:
// callback 可接收$emit传递过来的参数
$on(eventName,callbcak)
触发事件:
$emit(eventName, 传递给事件callback的数据)
移除事件:
$off(eventName, callback)
自定义事件用途
自定义事件在Vue常用于组件间的数据传递。
子组件向父组件传递数据
父组件:
<template><div>{{ msg }}<Child @changeMsg="change"></Child></div>
</template><script>
import Child from './Child.vue'
export default {data() {return {msg: ''}},components: {Child},methods:{change(val){this.msg = val;}}
}
</script>
子组件:
<template><div><button @click="trigger()">change</button></div>
</template>
<script>
export default {methods: {trigger(){this.$emit('changeMsg', '126513')}}
}
</script>
上面例子中,父组件导入了子组件,并在子组件的根标签上注册了监听事件changeMsg
。若changeMsg
被触发,则调用父组件里的change()
方法。子组件则通过this.$emit('changeMsg', '126513')
来触发changeMsg
。
这里需要注意一点:父组件注册监听事件时一定要添加给子组件的根标签(也就是这里的<Child>
)。否则,子组件无法找到changeMsg
事件。
兄弟组件间的通讯
自定义组件也可以用于兄弟组件间的通讯,需借助事件总线
来实现。具体请看Vue 组件间通讯之非父子组件间通讯——事件总线(EventBus)一文。
后记
灵活使用自定义事件,是开发的重要技能。其实,仔细观察HTML原生事件就会发现其跟自定义事件是一样的。区别无非就是在使用时HTML原生事件不用进行添加事件
、设定触发事件
操作而已。因为HTML早早替用户写好这部分了。这样看来,自定义事件是对原生事件的扩展与补充,更灵活、更高级了。
以上,就是我关于Vue自定义事件的见解。如有不对,望指出,必将虚心听取。
浅谈Vue 自定义事件——原理及用法相关推荐
- 浅谈vue双向绑定原理
简析mvvm框架 目前angular,reat和vue都是mvvm类型的框架 以vue为例 这里的vm 就是vue框架,它相当于中间枢纽的作用,连接着model 和view. 当前台显示的view发生 ...
- vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
- 浅谈Vue响应式原理
一.Vue中的响应式 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新. 二.响应式的基本原理 1.通过Objec ...
- vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析 成对出现:provide和inject是成对出现的 作用:用于父组件向子孙组件传递数据 使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...
- [Vue源码分析]自定义事件原理及事件总线的实现
最近小组有个关于vue源码分析的分享会,提前准备一下- 前言: 我们都知道Vue中父组件可以通过 props 向下传数据给子组件:子组件可以通过向$emit触发一个事件,在父组件中执行回调函数,从而实 ...
- 父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
- Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...
- [vue] vue自定义事件中父组件怎么接收子组件的多个参数?
[vue] vue自定义事件中父组件怎么接收子组件的多个参数? 子组件传递多个参数,父组件用展开运算符获取 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
- 浅谈Vue.js的优势
写在前面 今天小梦跟小伙伴们简简单单聊一下Vue.js的优势.小梦也是刚刚接触Vue.js,在学习一门新的技术之前,我们当然要了解其优势,知道优势在哪更加有利于我们去学习并转换为自己的储备. 浅谈Vu ...
最新文章
- 从0到1思考与实现iOS-Widget
- 北极星OKR斩获2021年阿里钉钉生态峰会开放平台年度银奖
- golang微服务框架对比_微服务里程碑,Golang与Spring Cloud Alibaba完美结合
- 使用循环语句判定用户账号密码输入三次是否正确
- OVS中arp响应的流表的实现
- H.264视频RTP负载格式/NALU的类型
- Kafka->Flink->Hbase(纯DDL/DML形式)
- 两种常见挂载Jenkins slave节点的方法
- HH SaaS电商系统的支付模块设计
- C语言实现线性动态(单向)链表【详细步骤】
- 10篇产品大V精华文章,你值得一读
- 跨服务器导入数据sql
- SpringMVC 整合Redis
- 记录一次日志实现,基于log4j2
- 计算机相关专业EI及SCI国际会议及期刊汇总
- 全渠道零售中台与数字化转型(1)-中台的前世今身
- HTML5简单实战--休假申请单
- 怎样辨别光模块的真假?
- 级联查询ajax,ajax级联查询
- 计算机科学的四大领域,计算机科学CS四大名校解析
热门文章
- percona-tool文档说明(4)- 监控类
- 身为IT人你应该知道的几个威客网站【转】
- 【ceph相关】ceph常见问题处理
- Linux环境部署Node.js
- python小游戏 仿谷歌浏览器小恐龙小游戏设计与实现
- 常见的一些计算机安全类词汇
- 还在用开发者工具上传小程序? 快来试试 miniprogram-ci 提效摸鱼
- Techstars携手Alphabit Fund与Launchpool,在伦敦推出专注于区块链的新加速器
- SDL_UpdateTexture+ffmpeg播放YUV数据程序异常崩溃:VM Regions Near 0x113e3d000:MALLOC_LARGE
- apache 2.4 httpd 2.4.6 反向代理后端的服务为HTTPS https 基于centos7