对vue.js中this.$emit的深入理解
网络编程 2021-07-04 17:33www.168986.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家分享一篇对vue.js中this.$emit的深入理解,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
对于vue.js中的this.emit的理解:this.emit(‘increment1',”这个位子是可以加参数的”);其实它的作用就是触发自定义函数。
看例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="vue.js"></script> <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment1="incrementTotal1"></button-counter> <button-counter v-on:increment2="incrementTotal2"></button-counter> </div> </body> <script> Vue.ponent('button-counter', { template: '<button v-on:click="increment">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { increment: function () { this.counter += 1; this.$emit('increment1',"这个位子是可以加参数的");//触发自定义increment1的函数。此处的increment1函数就是 incrementTotal1函数。 // this.$emit('increment2'); //此时不会触发自定义increment2的函数。 } } }); new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal1: function (e) { this.total += 1; console.log(e); }, incrementTotal2: function () { this.total += 1; } } }) </script> </html>
对上面的例子进行进一步的解析:
1、首先看 自定组件button-counter ,给其绑定了方法 :increment;
2、点击button时会执行函数 increment,increment中有 this.$emit(‘increment1',”这个位子是可以加参数的”);
3、当increment执行时,就会触发自定函数increment1,也就是incrementTotal1函数;
4、而increment执行时没有触发自定义函数increment2,所以点击第二个按钮不执行incrementTotal2的函数。
以上这篇对vue.js中this.$emit的深入理解就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程