cari

Rumah >hujung hadapan web >tutorial js >在vue.js中详细解读this.$emit的使用方法

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

亚连
亚连asal
2018-06-05 11:20:0510594semak imbas

下面我就为大家分享一篇对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中实现标签子元素的添加和赋值方法

Atas ialah kandungan terperinci 在vue.js中详细解读this.$emit的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：在vue中如何实现密码显示隐藏切换功能Artikel seterusnya：在vue.js中修饰符.self的使用方法？

Artikel berkaitan

Lihat lagi