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