溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
對于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的深入理解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
