网络编程
位置：首页>> 网络编程>> JavaScript>> 对vue.js中this.$emit的深入理解

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

作者：有一个王小森　　发布时间：2024-04-26 17:40:12　

标签：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.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的函数。

来源：http://blog.csdn.net/wangxiaoxiaosen/article/details/75258013

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com