對于vue.js中的this.emit的理解：this.emit(‘increment1',”這個位子是可以加參數的”)；其實它的作用就是觸發自定義函數。
看例子：
<!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',"這個位子是可以加參數的");//觸發自定義increment1的函數。此處的increment1函數就是 incrementTotal1函數。// this.$emit('increment2'); //此時不會觸發自定義increment2的函數。 } } }); 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時會執行函數 increment，increment中有 this.$emit(‘increment1',”這個位子是可以加參數的”);
3、當increment執行時，就會觸發自定函數increment1，也就是incrementTotal1函數；
4、而increment執行時沒有觸發自定義函數increment2，所以點擊第二個按鈕不執行incrementTotal2的函數。
以上這篇對vue.js中this.$emit的深入理解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
