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)文章
當(dāng)一個(gè)頁(yè)面需要加載較多個(gè)組件時(shí),并且組件自身又比較復(fù)雜,如果一次性加載,可能等待時(shí)間較長(zhǎng),體驗(yàn)不好,這個(gè)時(shí)候就需要延遲加載了,本文為大家介紹了Vue2實(shí)現(xiàn)組件延遲加載的示例代碼,需要的可以參考下2024-01-01
Vue2老項(xiàng)目配置ESLint和Prettier完整步驟
ESLint是一個(gè)靜態(tài)代碼分析工具,用于檢查JavaScript代碼的語(yǔ)法結(jié)構(gòu)和查找程序錯(cuò)誤,Prettier是一個(gè)代碼格式化工具,這篇文章主要給大家介紹了關(guān)于Vue2老項(xiàng)目配置ESLint和Prettier的完整步驟,需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)跑馬燈效果，可以更換顏色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串
這篇文章主要介紹了Vue.js 時(shí)間轉(zhuǎn)換代碼及時(shí)間戳轉(zhuǎn)時(shí)間字符串,需要的朋友可以參考下2018-10-10
vue移動(dòng)端下拉刷新和上拉加載的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue移動(dòng)端下拉刷新和上拉加載的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue props數(shù)據(jù)傳遞類型限制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
今天將從 Vue 的入口文件開(kāi)始，看看聲明了一個(gè) Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯(cuò)過(guò)奧2021-09-09
使用vue與jquery實(shí)時(shí)監(jiān)聽(tīng)用戶輸入狀態(tài)的操作代碼
本文是腳本之家小編給大家?guī)?lái)的使用vue與jquery實(shí)時(shí)監(jiān)聽(tīng)用戶輸入狀態(tài)，實(shí)現(xiàn)效果是input未輸入值時(shí)，按鈕禁用狀態(tài)，具體操作代碼大家參考下本文吧2017-09-09
vue?實(shí)現(xiàn)滑動(dòng)塊解鎖示例詳解
這篇文章主要為大家介紹了vue?實(shí)現(xiàn)滑動(dòng)塊解鎖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能示例
這篇文章主要介紹了vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能,結(jié)合實(shí)例形式分析了vue計(jì)算屬性get及set操作頁(yè)面元素實(shí)現(xiàn)選中與全選功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02