vue中this.$emit使用方法的實際案例
this.$emit()主要用于子組件向父組件傳值。
下面就給大家舉一個實際開發(fā)中使用到的案例。
需求:
點擊關聯(lián)項目,彈出關聯(lián)項目數據進行選擇一條數據,點擊確定,項目編號會回顯到關聯(lián)項目中。
1新增頁面
2 新增頁面中點擊關聯(lián)項目彈出的頁面
3實現效果
實現傳值需要用this.$emit代碼
這個頁面就是新增頁面中點擊關聯(lián)項目彈出的頁面(子頁面)
this.$emit('projectInfo', this.linkProjectInfoNum);參數projectInfo【方法名】:表示父組件名綁定的方法。
參數this.linkProjectInfoNum【項目編號】:表示傳遞給另一個頁面的值。
參數可以傳多個
然后在新增頁面中進行一個監(jiān)聽
其中<link-bill-list就是子頁面(新增頁面中點擊關聯(lián)項目彈出的頁面)的vue的文件名
ref:子頁面文件名
@projectInfo就是監(jiān)聽的名字。下面這個
其他的兩個也是在監(jiān)聽,不用管,你自己需要就可以加。
然后@projectInfo="projectInfo"其中引號引起來的是對監(jiān)聽執(zhí)行的方法
然后你可以獲取到value,value就是一開始在子頁面賦值的值this.linkProjectInfoNum。
總結
到此這篇關于vue中this.$emit使用方法的文章就介紹到這了,更多相關vue this.$emit使用方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用vue與jquery實時監(jiān)聽用戶輸入狀態(tài)的操作代碼
本文是腳本之家小編給大家?guī)淼氖褂胿ue與jquery實時監(jiān)聽用戶輸入狀態(tài),實現效果是input未輸入值時,按鈕禁用狀態(tài),具體操作代碼大家參考下本文吧2017-09-09