对vue.js中this.$emit的深入理解

2019-11-19 14:19:42

字体：大中小

来源：转载

供稿：网友

对于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.component('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的深入理解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：vue实现密码显示隐藏切换功能

下一篇：基于vue.js中事件修饰符.self的用法(详解)