首頁 >web前端 >js教程 >在vue.js中詳細解讀this.$emit的使用方法

在vue.js中詳細解讀this.$emit的使用方法

亚连原創: 2018-06-05 11:20:0510587瀏覽

下面我就為大家分享一篇對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中如何實現密碼顯示隱藏切換功能

看更多