對(duì)vue.js中this.$emit的深入理解

發(fā)布時(shí)間：2020-08-22 08:34:43 來源：腳本之家閱讀：2291 作者：有一個(gè)王小森欄目：web開發(fā)

對(duì)于vue.js中的this.emit的理解：this.emit(‘increment1',”這個(gè)位子是可以加參數(shù)的”)；其實(shí)它的作用就是觸發(fā)自定義函數(shù)。

看例子：

<!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',"這個(gè)位子是可以加參數(shù)的");//觸發(fā)自定義increment1的函數(shù)。此處的increment1函數(shù)就是 incrementTotal1函數(shù)。
//  this.$emit('increment2'); //此時(shí)不會(huì)觸發(fā)自定義increment2的函數(shù)。
  }
 }
 });
 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>

對(duì)上面的例子進(jìn)行進(jìn)一步的解析：

1、首先看自定組件button-counter ，給其綁定了方法：increment；

2、點(diǎn)擊button時(shí)會(huì)執(zhí)行函數(shù) increment，increment中有 this.$emit(‘increment1',”這個(gè)位子是可以加參數(shù)的”);

3、當(dāng)increment執(zhí)行時(shí)，就會(huì)觸發(fā)自定函數(shù)increment1，也就是incrementTotal1函數(shù)；

4、而increment執(zhí)行時(shí)沒有觸發(fā)自定義函數(shù)increment2，所以點(diǎn)擊第二個(gè)按鈕不執(zhí)行incrementTotal2的函數(shù)。

以上這篇對(duì)vue.js中this.$emit的深入理解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

對(duì)vue.js中this.$emit的深入理解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽