對vue.js中this.$emit的深入理解

更新時間：2018年02月23日 11:00:38 作者：有一個王小森

下面小編就為大家分享一篇對vue.js中this.$emit的深入理解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

對于vue.js中的this.emit的理解：this.emit(‘increment1',”這個位子是可以加參數(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',"這個位子是可以加參數(shù)的");//觸發(fā)自定義increment1的函數(shù)。此處的increment1函數(shù)就是 incrementTotal1函數(shù)。
//  this.$emit('increment2'); //此時不會觸發(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>

對上面的例子進行進一步的解析：

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

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

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

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

以上這篇對vue.js中this.$emit的深入理解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

基于Vue3定制復雜組件滾動條的實現(xiàn)
這篇文章主要介紹了如何利用vue3定制復雜組件的滾動條，文中通過示例代碼講解詳細，需要的朋友們下面就跟隨小編來一起學習學習吧
2023-04-04
詳解項目升級到vue-cli3的正確姿勢
這篇文章主要介紹了詳解項目升級到vue-cli3的正確姿勢，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue3界面使用router及使用watch監(jiān)聽router的改變
vue2中使用router非常簡單，但是vue3中略微有些改變，通過本文講解下他的改變，對vue3?watch監(jiān)聽router相關知識感興趣的朋友一起看看吧
2022-11-11
淺析Vue單文件組件與非單文件組件使用方法
這篇文章主要介紹了Vue單文件組件與非單文件組件使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
2022-12-12
vue Watch和Computed的使用總結(jié)
本文主要介紹Vue.js中監(jiān)聽器和計算屬性的相關知識點，包括對普通屬性的監(jiān)聽、對對象的監(jiān)聽、對數(shù)組的監(jiān)聽，以及計算屬性的Set方法，計算屬性與監(jiān)聽器的區(qū)別等等
2021-05-05
vue的props實現(xiàn)子組件隨父組件一起變化
這篇文章主要為大家詳細介紹了vue的props如何實現(xiàn)子組件隨父組件一起變化,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
vue2+electron項目搭建過程
文章介紹了如何使用Vue CLI 2搭建Vue項目,并添加Electron插件vue-cli-plugin-electron-builder來創(chuàng)建一個Vue+Electron項目,文章還提供了啟動和打包項目的方法,并提示了下載國內(nèi)網(wǎng)較慢的文件時可以先注釋掉代碼進行調(diào)試,感興趣的朋友一起看看吧
2025-01-01
vue3中批量全局注冊組件實例詳解
在vue中，我們在main.ts引入的全局注冊的組件是可以不需要import導入而直接使用的，使用的時候是自己全局注冊組件時的名稱，而不是組件名，這篇文章主要介紹了vue3中批量全局注冊組件,需要的朋友可以參考下
2023-05-05
vue.js中ref和$refs的使用及示例講解
這篇文章主要給大家介紹了關于vue.js中ref和$refs使用的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue.js具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-08-08
vue中v-model指令與.sync修飾符的區(qū)別詳解
本文主要介紹了vue中v-model指令與.sync修飾符的區(qū)別詳解，詳細的介紹了兩個的用法和區(qū)別，感興趣的可以了解一下
2021-08-08