關於vue.js中this.$emit的理解使用
一、每個 Vue 實例都實現瞭事件接口
即:
1、使用 $on(eventName) 監聽事件
2、使用 $emit(eventName, optionalPayload) 觸發事件
二、註意事項
1、父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件
2、不能用 $on 監聽子組件釋放的事件,而必須在模板裡直接用 v-on 綁定
三、例子及說明
1、父組件代碼及說明
<template> <div> <p>{{ total }}</p> <my-button4 @increment1="incrementTotal1"></my-button4> <!--自定義方法increment1監聽子組件觸發情況--> <my-button4 @increment2="incrementTotal2"></my-button4> <!--自定義方法increment2監聽子組件觸發情況--> </div> </template> <script> import myButton4 from './components/myButton4.vue' export default{ data(){ return{ total:0 } }, methods:{ incrementTotal1: function () { /*事件incrementTotal觸發*/ this.total += 1 }, incrementTotal2: function () { /*事件incrementTota2觸發*/ this.total += 2 } }, components:{ /*子組件的實例,要盡量放在最後,不然會出現一些不必要的問題*/ myButton4 } } </script>
2、子組件代碼及說明
<template> <button @click="incrementCounter">{{counter}}</button> <!--在子組件中創建一個按鈕,創建點擊事件--> </template> <script> export default{ data(){ return{ counter: 0 } }, methods: { incrementCounter: function (){ this.counter += 1 this.$emit('increment1') /*觸發自定義事件increment1,也就是父組件中的incrementTotal1事件*/ this.$emit('increment2') /*觸發自定義事件increment2,也就是父組件中的incrementTotal2事件*/ /*這兩個事件一次隻會觸發一個,為什麼呢?很簡單,因為每次隻單擊一個按鈕*/ } } } </script>
3、運行截圖
A、開始截圖:
B、點擊第一個按鈕截圖(+1)
C、點擊第二個按鈕截圖(+2)
四、總說明
1、首先看子組件件,按鈕中給其綁定瞭方法:incrementCounter;
2、點擊button時會執行函數 incrementCounter,increment中有 this.$emit(‘increment1)和this.$emit(‘increment2),看點擊的是哪個按鈕就執行哪個;
3、當incrementCounter執行時,就會觸發自定函數increment1(點擊第一個按鈕的時候)或者increment(點擊第二個按鈕的時候),也就是incrementTotal1或者incrementTotal2函數;
到此這篇關於關於vue.js中this.$emit的理解使用的文章就介紹到這瞭,更多相關vue.js this.$emit內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue父子組件進行通信方式原來是這樣的
- 如何用Vue實現父子組件通信
- Vue中的父子組件通訊以及使用sync同步父子組件數據
- vue.js父子組件傳參的原理與實現方法 原創
- 前端vue3 setup使用教程