首页 > 文章 > web前端 > 在vue.js中详细解读this.$emit的使用方法

在vue.js中详细解读this.$emit的使用方法

亚连原创: 2018-06-05 11:20:0510495浏览

下面我就为大家分享一篇对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>
<p id="counter-event-example">
 <p>{{ total }}</p>
 <button-counter v-on:increment1="incrementTotal1"></button-counter>
 <button-counter v-on:increment2="incrementTotal2"></button-counter>
</p>
</body>
<script>
 Vue.component(&#39;button-counter&#39;, {
 template: &#39;<button v-on:click="increment">{{ counter }}</button>&#39;,
 data: function () {
  return {
  counter: 0
  }
 },
 methods: {
  increment: function () {
  this.counter += 1;
  this.$emit(&#39;increment1&#39;,"这个位子是可以加参数的");//触发自定义increment1的函数。此处的increment1函数就是 incrementTotal1函数。
//  this.$emit(&#39;increment2&#39;); //此时不会触发自定义increment2的函数。
  }
 }
 });
 new Vue({
 el: &#39;#counter-event-example&#39;,
 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 cli webpack中如何使用sass（详细教程）

在jQuery中如何改变P标签文本值

在jQuery中实现标签子元素的添加和赋值方法

以上是在vue.js中详细解读this.$emit的使用方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：在vue中如何实现密码显示隐藏切换功能下一篇：在vue.js中修饰符.self的使用方法？

查看更多