对vue.js中this.$emit的深入理解
程序员文章站
2022-06-26 12:37:02
对于vue.js中的this.emit的理解：this.emit(‘increment1',”这个位子是可以加参数的”)；其实它的作用就是触发自定义函数。
看例子：...
对于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的深入理解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。