(一)基于webpack的项目初始化

Vue组件之自定义事件的功效图解,vue组件自定义图解

利用v-on绑定自定义事件

(一)基于webpack的花色初阶化

在选拔在此以前,大家先利用npm创设叁个vue应用,使该类型能很好地和webpack模块打包器同盟使用,命令如下

进入自定义空文件夹vuepro下,myapp项目开首化需选取webpack打包生成一个正规目录的品种文件夹

vue init webpack myapp

安装进度会出现以下多少个让大家操作的地点,前多少个一向按回车,前边输入n就能够,如下图

图片 1

设置到位后,myapp文件夹下会自动生成一些文件和文书夹,表示大家项目开始化完成,而小编辈的的应用软件.vu是主组件,components组件是Vue的一种代码复用的建制,components把js和HTML混合到一道,作为任何Vue应用层的基本功

图片 2

我们得以遵照上海教室终端提示的授命去运作大家的品类

cd myapp

npm run dev

图片 3

大家再将上海体育场地中赢得的网站赋值到浏览器展开,获得以下页面表示大家依照webpack的种类营变成功

图片 4

开发主组件,假若亲们出现了下图和作者同样的晋升,是因为我们的javascript不支持ES6语法,我们只需步入安装里面改一下言语类型就足以了。

图片 5

图片 6

到这里大家能够去介绍组件自定义事件的运用了

(二)v-on && $emit 使用 $on(eventName)
监听事件 使用 $emit(eventName) 触发事件

大家在myapp/src/components下新建三个零部件Emit.vue,同期大家得在主组件APP.vue中引进该器件,以及登记该器件

图片 7

下一场我们在Emit.vue文件中去些一个自定义事件的例子

图片 8

当大家点击按键就能够获取到零部件内部的风浪盒参数

图片 9

总结

上述所述是小编给大家介绍的Vue组件之自定义事件的作用图解,希望对我们具有辅助,假使大家有其余疑问请给自个儿留言,笔者会及时苏醒我们的。在此也特别感激大家对帮客之家网址的援救!

使用v-on绑定自定义事件 (一)基于webpack的档案的次序发轫化
在利用在此之前,大家先选用npm构…

相关文章