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. ...
随机推荐
- MySql的备份还原
备份数据是数据库管理最常用的操作.为了保证数据库中数据的安全,数据管理员需要定期进行数据备份.一旦数据库遭到破坏,便可通过备份的文件来还原数据库.因此,数据备份是一项很重要的工作. 数据备份 使用my ...
- gihub简单学习 步步操作(简单易学)
一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...
- vue+cordova项目
教你用Cordova打包Vue项目 现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app.据我现在的了解打包Vue项目目前流行的就是使 ...
- Java给树加子节点个数统计
通过后台实现 private List<Photo> getChildren(Photo photo) { List<Photo> children = new ArrayLi ...
- JavaEE 7 最全教程集锦(转)
转自 http://www.iteye.com/news/28009 甲骨文公司已经在6月份正式发布了JavaEE 7,该版本带来了诸多新的规范及特性,将企业级开发提升到了一个新的层次. Java E ...
- Full postback triggered by LinkButton inside GridView inside UpdatePanel
GridView inside of a UpdatePanel,get the button to trigger a partial postback <asp:ScriptManager ...
- java向上转型的问题
import java.util.Arrays;import java.util.HashSet;import java.util.Set;class A{ private String s1 = & ...
- Nexus-NuGet私有仓库服务搭建(一)
搭建私有Nuget服务器的方式有很多,大多数人文章介绍在vs 中新建默认web项目,然后再Nuget 中安装 Nuget.Server,再部署到IIS 中即可.虽然能用,但是这种方式太过简陋,操作界面 ...
- mybatis笔记<二> 整合spring
mybatis与spring整合需要添加几个jar包,mybatis-spring, spring-context, spring-jdbc 1. spring ioc只要一个jar包就ok 2. 我 ...
- Spring课程 Spring入门篇 6-3 ProxyFactoryBean及相关内容(下)
1 解析 1.1 使用global advisors demo 1.2 jdk代理和cglib代理的选择 1.3 如何强制使用CGLIB实现AOP? 1.4 JDK动态代理和CGLIB字节码生成的区别 ...