Vue组件之自定义事件的功能图解
作者：雅玲哑铃 发布时间：2024-05-05 09:07:34
使用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组件之自定义事件的功能图解网站的支持！
来源：https://www.jianshu.com/p/16631d01bf18
0
投稿猜你喜欢
利用python的sftp实现文件上传，可以是文件，也可以是文件夹。版本Python2.7.13 应该不用pip安装更多的插件，都是自带的不- 有时候为了自动化测试网页,我们往往希望能够使用一些脚本语言控制浏览器. 通过脚本模拟一些浏览器动作,然后测试得到的结果.这里, 我们讲解一下
- Python实现图像处理：PiL依赖库的应用本文包含的练习题主要是PIL依赖库，即pillow相关的应用。练习一：使用python给图片增加
- Python最基本的数据结构是序列(列表/元组)。一个序列中的每个元素都分配有一个数字- 它的位置或索引。第一个索引是0，第二个
- 三个工具包python操作excel的三个工具包如下，注意，只能操作.xls，不能操作.xlsx。• xlrd: 对excel进行读相关操作
- 1.setting--version control--subversion，按照图中红色字体填入对应信息2.配置中途遇到没找到svn.ex
- 引言之前在看 CAP 定理时抱有很大的疑惑，CAP 定理的定义是指在分布式系统中三者只能满足其二，也就是存在分布式 CA 系统的。在网络上查
- 也许是这样的。下面我们来推荐一个简单的分页程序，代码和说明见下（两段虚线“-----”间的代码是实现该功能的重要语句）：chunfeng.a
- #!/usr/bin/python# -*- coding: utf-8 -*-class TreeNode(object): &
- 模式库 在模式库里,我将列出所有电子商务网站需要的模式.以下将罗列出经典常用的模式案例,我也试图让这些模式看起来更有趣味性与实用性。(Yah
- 分页一般和表格一起用，分页链接作为表格的一部分，将分页链接封装成一个独立的组件，然后作为子组件嵌入到表格组件中，这样比较合理。效果：代码：1
- 几个月来好像就现在暂时无需求，稍微轻松一下，然后在Q群中发现有人提问，怎么用CSS实现数学公式“四又二分之一”。对于这个公式个人
- 我就废话不多说了，直接上代码吧！from os import listdirimport osfrom time import timeim
- 介绍Go使用goroutines来处理connection的读写事件，不会阻塞：c, err := srv.newConn(rw) &nbs
- 一，前言我们现在拿到了一个十分庞大的数据集。是json文件，里面存储了将近十万个数据，现在要对其中的数据进行清洗处理。二，python模块i
- PHP simplexml_import_dom() 函数实例获取 DOM 文档节点并转换为 SimpleXML 节点：<?php $
- 主要用到的工具：Pandas 、fuzzywuzzyPandas:是基于numpy的一种工具，专门为分析大量数据而生，它包含大量的处理数据的
- 这篇文章主要介绍了通过实例解析Python调用json模块,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要
- 当多个事务同时持有和请求同一资源上的锁而产生循环依赖的时候就产生了死锁。死锁发生在事务试图以不同的顺序锁定资源。以StockPrice表上的
- python 如何实现Excel 的Vlookup功能1、Excel 中VLOOKUP具体步骤Excel 中的VLOOKUP使用说明采用下面
