vue中this.$emit使用方法的實(shí)際案例
this.$emit()主要用于子組件向父組件傳值。
下面就給大家舉一個(gè)實(shí)際開(kāi)發(fā)中使用到的案例。
需求：
點(diǎn)擊關(guān)聯(lián)項(xiàng)目，彈出關(guān)聯(lián)項(xiàng)目數(shù)據(jù)進(jìn)行選擇一條數(shù)據(jù)，點(diǎn)擊確定，項(xiàng)目編號(hào)會(huì)回顯到關(guān)聯(lián)項(xiàng)目中。
1新增頁(yè)面
2 新增頁(yè)面中點(diǎn)擊關(guān)聯(lián)項(xiàng)目彈出的頁(yè)面
3實(shí)現(xiàn)效果
實(shí)現(xiàn)傳值需要用this.$emit代碼
這個(gè)頁(yè)面就是新增頁(yè)面中點(diǎn)擊關(guān)聯(lián)項(xiàng)目彈出的頁(yè)面（子頁(yè)面）
this.$emit('projectInfo', this.linkProjectInfoNum);參數(shù)projectInfo【方法名】：表示父組件名綁定的方法。
參數(shù)this.linkProjectInfoNum【項(xiàng)目編號(hào)】：表示傳遞給另一個(gè)頁(yè)面的值。
參數(shù)可以傳多個(gè)
然后在新增頁(yè)面中進(jìn)行一個(gè)監(jiān)聽(tīng)
其中<link-bill-list就是子頁(yè)面（新增頁(yè)面中點(diǎn)擊關(guān)聯(lián)項(xiàng)目彈出的頁(yè)面）的vue的文件名
ref：子頁(yè)面文件名
@projectInfo就是監(jiān)聽(tīng)的名字。下面這個(gè)
其他的兩個(gè)也是在監(jiān)聽(tīng)，不用管，你自己需要就可以加。
然后@projectInfo="projectInfo"其中引號(hào)引起來(lái)的是對(duì)監(jiān)聽(tīng)執(zhí)行的方法
然后你可以獲取到value，value就是一開(kāi)始在子頁(yè)面賦值的值this.linkProjectInfoNum。
總結(jié)
到此這篇關(guān)于vue中this.$emit使用方法的文章就介紹到這了,更多相關(guān)vue this.$emit使用方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
說(shuō)說(shuō)Vuex的getters屬性的具體用法
這篇文章主要介紹了說(shuō)說(shuō)Vuex的getters屬性的具體用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要介紹了vue按需引入element Transfer 穿梭框的相關(guān)資料,需要的朋友可以參考下2017-09-09
項(xiàng)目中需要制作一個(gè)雙擊編輯單擊選中可刪除Tag標(biāo)簽,本文就來(lái)介紹一下如何實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
這篇文章主要介紹了Vue2 添加數(shù)據(jù)可視化支持的方法步驟,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
Vue 中 toRefs() 和 toRef() 的使用方法
在 Vue 3 中,toRefs()可以將響應(yīng)式對(duì)象的屬性轉(zhuǎn)換為可響應(yīng)的 refs,主要用于在解構(gòu)響應(yīng)式對(duì)象時(shí),保持屬性的響應(yīng)性,這篇文章主要介紹了Vue 中 toRefs() 和 toRef() 的使用,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了解決Vue-cli無(wú)法編譯es6的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue?innerHTML?綁定單擊事件不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue.js的組件的使用有3個(gè)步驟：創(chuàng)建組件構(gòu)造器、注冊(cè)組件和使用組件。這篇文章主要介紹了vue 注冊(cè)組件的使用,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
前端Vue數(shù)據(jù)不更新問(wèn)題的深入分析與解決方案
在前端開(kāi)發(fā)中,Vue.js 是一個(gè)非常流行的 JavaScript 框架,它以其簡(jiǎn)潔的語(yǔ)法和強(qiáng)大的響應(yīng)式系統(tǒng)而聞名,然而,盡管 Vue 的響應(yīng)式系統(tǒng)非常強(qiáng)大,但在實(shí)際開(kāi)發(fā)中,開(kāi)發(fā)者仍然可能會(huì)遇到數(shù)據(jù)不更新的問(wèn)題,本文將深入探討 Vue 數(shù)據(jù)不更新的常見(jiàn)原因,并提供詳細(xì)的解決方案2025-03-03
vue使用vant中的checkbox實(shí)現(xiàn)全選功能
這篇文章主要為大家詳細(xì)介紹了vue使用vant中的checkbox實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11