Vue组件之自定义事件的功能图解
使用v-on绑定自定义事件
（一）基于webpack的项目初始化
在使用之前，我们先使用npm构建一个vue应用，使该项目能很好地和webpack模块打包器配合使用，命令如下
进入自定义空文件夹vuepro下，myapp项目初始化需利用webpack打包生成一个标准目录的项目文件夹
vue init webpack myapp
安装过程会出现以下几个让我们操作的地方，前几个直接按回车，后面输入n即可，如下图
安装完成后，myapp文件夹下会自动生成一些文件和文件夹，表示我们项目初始化完成，而我们的的APP.vu是主组件，components组件是Vue的一种代码复用的机制,components把js和HTML混合到一起，作为整个Vue应用层的基础
我们可以根据上图终端提示的命令去运行我们的项目
cd myapp
npm run dev
我们再将上图中得到的网址赋值到浏览器打开，得到以下页面表示我们基于webpack的项目构建成功
打开主组件，如果亲们出现了下图和我一样的提醒，是因为我们的javascript不支持ES6语法，我们只需进入设置里面改一下语言类型就可以了。
到这里我们可以去介绍组件自定义事件的使用了
（二）v-on && $emit 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件
我们在myapp/src/components下新建一个组件Emit.vue，同时我们得在主组件APP.vue中引入该组件，以及注册该组件
然后我们在Emit.vue文件中去些一个自定义事件的例子
当我们点击按钮就能获取到组件内部的事件盒参数
总结
以上所述是小编给大家介绍的Vue组件之自定义事件的功能图解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
在路由时传递参数，一般有两种形式，一种是拼接在url地址中，另一种是查询参数。这篇文章主要介绍了Spring Boot/VUE中路由传递参数,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了vue实现的上传图片到数据库并显示到页面功能,结合实例形式分析了基于vue.js的数据库操作及页面图片显示相关操作技巧,需要的朋友可以参考下2018-03-03
Vue 2.0+Vue-router构建一个简单的单页应用（附源码）
这篇文章主要给大家介绍了基于Vue 2.0+Vue-router构建了一个简单的单页应用，文中通过实例介绍的非常详细，并在文末给出了源码下载，需要的朋友可以下载学习参考，下面来一起看看吧。2017-03-03
这篇文章主要介绍了Vue使用axios引起的后台session不同操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Element input树型下拉框的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue实现手机号、验证码登录（60s禁用倒计时），帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
本篇文章主要介绍了Vue-Router模式和钩子的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家详细介绍了vue extend+promise封装全局弹窗组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
Vue解决echart在element的tab切换时显示不正确问题
这篇文章主要介绍了Vue解决echart在element的tab切换时显示不正确问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论