对vue.js中this.$emit的深入理解
更新时间：2018年02月23日 11:00:38 作者：有一个王小森
下面小编就为大家分享一篇对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的函数。
以上这篇对vue.js中this.$emit的深入理解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何利用vue3定制复杂组件的滚动条，文中通过示例代码讲解详细，需要的朋友们下面就跟随小编来一起学习学习吧2023-04-04
这篇文章主要介绍了详解项目升级到vue-cli3的正确姿势，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
vue3界面使用router及使用watch监听router的改变
vue2中使用router非常简单，但是vue3中略微有些改变，通过本文讲解下他的改变，对vue3 watch监听router相关知识感兴趣的朋友一起看看吧2022-11-11
这篇文章主要介绍了Vue单文件组件与非单文件组件使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
本文主要介绍Vue.js中监听器和计算属性的相关知识点，包括对普通属性的监听、对对象的监听、对数组的监听，以及计算属性的Set方法，计算属性与监听器的区别等等2021-05-05
这篇文章主要为大家详细介绍了vue的props如何实现子组件随父组件一起变化,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
文章介绍了如何使用Vue CLI 2搭建Vue项目,并添加Electron插件vue-cli-plugin-electron-builder来创建一个Vue+Electron项目,文章还提供了启动和打包项目的方法,并提示了下载国内网较慢的文件时可以先注释掉代码进行调试,感兴趣的朋友一起看看吧2025-01-01
在vue中，我们在main.ts引入的全局注册的组件是可以不需要import导入而直接使用的，使用的时候是自己全局注册组件时的名称，而不是组件名，这篇文章主要介绍了vue3中批量全局注册组件,需要的朋友可以参考下2023-05-05
这篇文章主要给大家介绍了关于vue.js中ref和$refs使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
本文主要介绍了vue中v-model指令与.sync修饰符的区别详解，详细的介绍了两个的用法和区别，感兴趣的可以了解一下2021-08-08
最新评论