Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件:
可以分为3步理解:
1.在组件模板中按照正常事件机制绑定事件:
template: '<button v-on:click="increment">{{ counter }}</button>',
如上,v-on:click就是用来给子组件绑定点击事件的,这就是原生的自带的事件,容易理解。
2.子组件的事件发生时,在事件函数中向父组件“报告”这一事件(使用$emit):
methods: {
increment: function () {
this.counter += 1;
this.$emit('increment');
}
},
上面事件函数中的代码this.$emit('increment')的意思就是向父组件报告,自己发生了‘increment’事件。至于发生的事件叫什么名字,可以随意取名,只要在父组件中绑定时名称一致即可。
3.父组件在使用时,明确使用v-on绑定子组件传来的事件:
<button-counter v-on:increment="incrementTotal"></button-counter>
上方的v-on:increment就是绑定的子组件的increment事件。
常用语父组件中的数据变化与子组件的操作有关的情况。
Vue组件绑定自定义事件的更多相关文章
- vue组件绑定原生事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【vue】vue组件的自定义事件
父组件: <template> <div> <my-child abcClick="sayHello"></my-child> &l ...
- vue怎么给自定义组件绑定原生事件
下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...
- 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?
首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- vue子组件的自定义事件
父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...
- vue组件、自定义指令、路由
1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- Vue中调用另一个组件中自定义事件
之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...
随机推荐
- django允许跨域请求配置
django允许跨域请求配置 下载corsheader pip install django-cors-headers 修改setting.py中配置 在INSTALLED_APPS中增加corshe ...
- Druid SQL 解析器概览
概览 Druid 的官方 wiki 对 SQL 解析器部分的讲解内容并不多,但虽然不多,也有利于完全没接触过 Druid 的人对 SQL 解析器有个初步的印象. 说到解析器,脑海里便很容易浮现 par ...
- 有标号的DAG计数 III
Description 给定一正整数n,对n个点有标号的有向无环图进行计数,这里加一个限制:此图必须是弱连通图.输出答案 mod 10007 的结果. Solution 弱连通图即把边变成无向之后成为 ...
- 系统对象的使用——Cookie,ViewState,Session,Application
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...
- 纯手写实现HashMap
1.hashmap的实现 ① 初始化 1)定义一个Node<K, V>的数组来存放元素,但不立即初始化,在使用的时候再加载 2)定义数组初始大小为16 3)定义负载因子,默认为0.75, ...
- Spring学习笔记:面向切面编程AOP(Aspect Oriented Programming)
一.面向切面编程AOP 目标:让我们可以“专心做事”,避免繁杂重复的功能编码 原理:将复杂的需求分解出不同方面,将公共功能集中解决 *****所谓面向切面编程,是一种通过预编译方式和运行期动态代理实现 ...
- linux系统下部署项目
一.修改防火墙设置,开放对应的端口 修改Linux系统防火墙配置需要修改 /etc/sysconfig/iptables 这个文件,如果要开放哪个端口,在里面添加一条 -A RH-Firewall- ...
- 5、springboot之修改端口号
在resources中加入application.properties文件,里面加入 servier.port = 端口号 访问的时候,就用localhost:端口号 完事
- Effective C++ .15,16获取原始资源和成对使用同类型new和delete
15. 智能指针可以通过get操作 #include <iostream> #include <cstdlib> #include <memory> using n ...
- Hibernate 性能优化一对一关联映射
概述: hibernate提供了两种映射一对一关联的方式:按照外键映射和按照主键映射. 下面以员工账号和员工档案为例 ,介绍两种映射方式,并使用这两种映射方式分别完成以下持久化操作: (1)保存员工档 ...