位置: 编程技术 - 正文

浅谈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配置)

  • 餐饮发票公司怎么抵税
  • 用于员工福利的进项税转出分录
  • 消防维保技术服务承诺书
  • 个税分类所得税率
  • 出售交易性金融资产发生的净损失应计入营业外支出
  • 农村合作社怎么挣钱
  • 未达起征点增值税能否开票
  • 个税补缴纳
  • 增值税附加税由买方承担如何计算
  • 模具费入什么会计科目
  • 季度所得税申报表怎么申报
  • 固定资产出售损益
  • 可以税前扣除的商业健康保险有哪些
  • 会计核算形式
  • 预期收益率计算器
  • 多付银行承兑退回的会计分录怎么写?
  • 出口退税代理费用大概多少
  • 固定资产的发票
  • 无发生额有没有对账单
  • 一般纳税人企业是什么意思
  • 增值税发票提示文件不匹配
  • 残疾人保障金怎么计提
  • 商业承兑汇票申请流程
  • 一季度所得税费用怎么算
  • 金税盘百旺和航天
  • 交通运输服务增值税税率
  • 增值使用费可取消吗?
  • win11 zen2
  • 光伏电站运维费用清单
  • 个税返还的会计处理方法
  • 品质扣款单
  • PHP:token_get_all()的用法_Tokenizer函数
  • 怎么更改win7
  • php零基础入门
  • 租赁经营账务处理办法
  • 提供劳务收入如何核算
  • 暴风雪的寒冷
  • vue怎么让按键启用和禁用
  • 营改增增值税会计处理
  • php怎么设置管理员权限
  • 文化事业建设费减免政策
  • 一万字综述怎么写
  • 你别找了
  • cynefin框架
  • php分页思路
  • 罚款记入其他应收款科目
  • 员工食堂买菜账务流程
  • access untagged
  • 建筑租赁公司是什么意思
  • 电子承兑汇票到期后多少天能兑现
  • 收取物业费不开发票
  • 关联方资金往来是否收取利息
  • 税前扣除的职工福利费支出怎么算
  • 损益类账户借贷方向增减
  • 员工借款可以直接转账吗
  • 小规模纳税人的认定标准是什么
  • 非营利医疗机构由谁批准
  • sql server 数据库介绍
  • sqlserver2000怎么用
  • 详解MySQL的limit用法和分页查询语句的性能分析
  • 苹果序列号查询
  • windos基于
  • win10虚拟桌面版
  • 安装windowsserver2008r2提示无法定位程序输入点
  • windowsxp桌面图标消失
  • dmidecode 硬盘
  • linux bash sh
  • 哪些游戏是c#开发的
  • express.json()
  • andriod+nfc
  • 统计文件个数linux
  • vue中的echarts
  • 深入理解新发展理念,推进供给侧结构性改革
  • 一个进程cpu占用率长时间为90%以上
  • bootstrap制作的网站页面
  • javascript中substr,substring,slice.splice的区别说明
  • unity3d图形学
  • Python中字符串的索引
  • 公司买的保险怎么查询保单明细
  • 无锡市国家税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设