位置: 编程技术 - 正文

浅谈Vue.js 组件中的v-on绑定自定义事件理解(vue组件精讲)

编辑:rootadmin

推荐整理分享浅谈Vue.js 组件中的v-on绑定自定义事件理解(vue组件精讲),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue组件教程,vue组件精讲,vue组件是什么样子的,vue.js组件精讲,vue.js组件精讲,vue.js组件精讲,vue组件用法,vue组件用法,内容如对您有帮助,希望把文章链接给更多的朋友!

每个 Vue 实例都实现了事件接口(Events interface),即:

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。

另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

下面是一个文档上面的例子:

年4月日更新

跟着这个例子我来谈谈理解,更新以前我那种错误的思想

先画出理解的步骤,跟着步骤来进行理解

步骤1:

浅谈Vue.js 组件中的v-on绑定自定义事件理解(vue组件精讲)

大家先看到这里,其实在步骤4里面的自定义标签经过渲染之后是变成了如 步骤一 一样的代码,所以我们应该从这里入手理解父子组件间事件绑定。在子组件里面把点击事件(click)绑定给了函数increment(即图片里面的步骤2),这里容易理解,即点击了子组件的按钮将会触发位于子组件的increment函数

步骤2与步骤3:

increment函数被触发执行,在步骤2里面执行了一句调用函数的语句

我们来看一下文档

vm.$emit( event, […args] ) : 触发当前实例上的事件。附加参数都会传给监听器回调

在这里是什么意思呢?按我自己的大白话就是这样说的:

通过这句函数可以让父组件知道子组件调用了什么函数,this.$emit(‘increment') 即类似于子组件跟父组件说了一声“hi,爸爸 我调用了我自己的increment函数”,通知父组件

步骤4:

回看一下在父组件里面定义的自定义标签,可以看到

什么意思呢?我们还是用大白话来解释一下

就是说“孩子,当你调用了increment函数的时候,我将调用incrementTotal函数来回应你”

这时我们回想步骤3,在子组件我们已经使用emit来进行通知,所以,这样就形成父子组件间的相互呼应传递信息,其实在开发的过程中父子组件通讯也都是使用这样的方法,父组件传递信息给子组件的时候会通过props参数,通常不会直接在子组件中修改父组件传递下来的信息,而且通过这样的一个钩子去通知父组件对某些参数进行改变

步骤5:

这个就容易理解了,上一版本是本人在初学的时候写的所以思维很不严谨,抱歉,欢迎大家指导批评

标签: vue组件精讲

本文链接地址:https://www.jiuchutong.com/biancheng/377390.html 转载请保留说明!

上一篇:Vue.js与 ASP.NET Core 服务端渲染功能整合

下一篇:Vue-cli-webpack搭建斗鱼直播步骤详解(vue cli3 webpack配置)

  • 什么公司需要缴纳印花税
  • 山东税务网上申报平台操作员查询
  • 广告行业的税负率
  • 一般纳税人企业所得税是多少
  • 增值税征税范围及税率
  • 理财产品分红和不分红的区别
  • 金蝶软件发票录入什么科目
  • 购房发票是不是增值税
  • 销项发票导出格式不对怎么办
  • 预提费用报税时填哪里
  • 抵扣联多长时间的勾选认证
  • 房地产开发企业资质证书
  • 法定盈余公积和法定公积金一样吗
  • 应计入企业存货成本有哪些
  • 股东贷款是什么意思
  • 计提资产减值准备是利好还是利空?
  • 企业的耕地占用税怎么算
  • 营改增后附加税费入应交税费还是营业税金及附加
  • 什么称为非正数
  • 纳税人转让2016年以后的土地使用权
  • 哪些业务不需要进行平行记账
  • 应收补贴款贷方余额
  • 一般纳税人出售不动产增值税税率是多少
  • 营改增后房地产公司税种及税率
  • 增值税留抵退税政策解读
  • 工程预算费用会计怎么做
  • 农业产品免税范围注释
  • 非贸付汇税金承担
  • 在建工程领用原材料需要进项税转出吗
  • 固定资产丢失进项税需要转出吗
  • 收到增值税红字发票怎么入账
  • 公司借款利息可以用对公户转账吗
  • php随机生成1到3的数字
  • phpcurl模拟登录
  • python读书笔记
  • thinkphp模板引擎原理
  • 基于vue的ui
  • 小程序的生命周期函数有哪些
  • linux 运行php
  • python uiautomator2的点击操作
  • Joe是一款优雅功能强大的Typecho主题功能多上手快
  • 生产企业出口退税政策
  • 评价股权转让要交什么税
  • 阿里云ecs重装
  • python3 sys模块
  • mysql显示数据库语句
  • 进项与销项区别
  • 公司个人借款如何下账
  • 如何在Access中设置有效性规则必须大于等于0
  • java怎么用mysql
  • 中小企业所得税优惠
  • 其他权益工具账面价值
  • 企业所得税的税收筹划
  • 年终缴税比例
  • 跨年多计提的工资如何处理
  • 金三财务报表如何更正?
  • 税盘不缴费会怎么样
  • 买相机送肩带吗
  • 市盈率为负数是说明什么呢
  • 怎么验证触发器的执行
  • mysql5717安装及配置超详细教程
  • winxp开机提示explorer.exe
  • 手把手教你安装实木门
  • win10添加闹钟
  • crossfire.exe是什么
  • windows10总是出现打印机错误
  • win7登录账号
  • jquery弹出框样式大全
  • 飞行歌曲
  • js unload
  • 基于jQuey实现鼠标滑过变色(整行变色)
  • jquery.Callbacks的实现详解
  • javascript模拟器
  • jquery监听span内容的变化
  • python编程内容
  • jquery通配符选择器
  • 冲减多计提的坏账准备
  • 东莞市国税局南城莫
  • 临时工和季节工需要交社保吗合法吗
  • 增值税发票报税流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设