對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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue仿element實現(xiàn)分頁器效果，實現(xiàn)思路是定一個值foldPage, 意為當前最多顯示的標簽數(shù),當總頁數(shù)超過即顯示省略.省略分為左邊省略(folder1)和右邊省略(folder2)，具體實例代碼大家參考下本文2018-09-09
今天小編就為大家分享一篇淺談vue 錨點指令v-anchor的使用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
打包組件報錯:Error:Cannot?find?module?'vue/compiler-sfc&ap
最近遇到這樣的問題,vue組件庫搭建過程中使用webpack打包組件時報錯,本文給大家分享打包組件報錯:Error:?Cannot?find?module?‘vue/compiler-sfc‘的解決方法,感興趣的朋友一起看看吧2023-12-12
這篇文章主要為大家詳細介紹了vue+F2生成折線圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了詳解Nuxt內(nèi)導航欄的兩種實現(xiàn)方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
本文主要介紹了vite的搭建與使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
vue?cli2?和?cli3去掉eslint檢查器報錯的解決
這篇文章主要介紹了vue?cli2?和?cli3去掉eslint檢查器報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli中devServer.proxy相關(guān)配置項的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關(guān)配置項的使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue路徑寫法之關(guān)于./和@/的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vite+vue3+tsx項目打包后動態(tài)路由無法加載頁面的問題及解決
這篇文章主要介紹了vite+vue3+tsx項目打包后動態(tài)路由無法加載頁面的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03