快捷導(dǎo)航

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

更新時(shí)間：2018年02月23日 11:00:38 作者：有一個(gè)王小森

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

對(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的深入理解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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