前言：

        本次案例是一個基于 Vue2 的全局事件總線通信的仿 Github 用戶搜索模塊，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（發送請求時需要將輸入的用戶名稱綁定替換掉xxx），如果對全局事件總線不太熟練的小伙伴可以看這篇文章：http://t.csdn.cn/oHEOWhttp://t.csdn.cn/oHEOW

文章目錄：

一：效果展示 

二：代碼分析

2.1 綁定自定義事件 

2.2 觸發自定義事件 

三：源碼獲取

---

一：效果展示 

• 未搜索用戶頁面

•  查詢后加載中頁面

•  查詢成功渲染頁面

• 點擊頭像或下部鏈接進入用戶主頁

•  查詢失敗頁面報錯提示

---

二：代碼分析

代碼共分為了兩個子組件，一個是搜索組件（Search），另一個是列表組件（List），其次search組件中輸入框v-model雙向數據綁定，點擊搜索后開始查詢，其中過程分為了四步：第一是未搜索的歡迎頁面背景，第二是請求未加載出來的loading背景，第三是渲染用戶列表，第四是請求失敗的報錯提示頁面背景。

2.1 綁定自定義事件 

綁定自定義事件在List組件中，data中的數據是定義了userinfo對象來存放其四個狀態的布爾值，后續的數據傳遞是直接傳遞userinfo這個對象，使用 $on 綁定自定義事件 getuserinfo，當這個事件觸發時執行后面的箭頭回調函數，將傳遞來的對象接收并覆蓋掉data中原有的四個狀態布爾值。

 


    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:'List',
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                UserInfo:{
            

        

    

    


        


            


            

        

        


            

                iswelcome:true,
            

        

    

    


        


            


            

        

        


            

                isloading:false,
            

        

    

    


        


            


            

        

        


            

                users:'',
            

        

    

    


        


            


            

        

        


            

                error:'' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                mounted(){
            

        

    

    


        


            


            

        

        


            

                this.$bus.$on('getUserInfo',(datas)=>{
            

        

    

    


        


            


            

        

        


            

                // console.log('list組件收到了傳來的用戶數據',res); 
            

        

    

    


        


            


            

        

        


            

                this.UserInfo=datas
            

        

    

    


        


            


            

        

        


            

                console.log(datas);
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

2.2 觸發自定義事件 

點擊搜索按鈕即可使用 $emit 觸發自定義事件，在請求成功前會將 isloading 改為true，其余改為false進行數據傳遞，傳遞給 list 組件后期就會顯示出loading的背景頁面，其余同理

 


    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:'Search',
            

        

    

    


        


            


            

        

        


            

                data(){
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                ipt_value:'',
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                methods:{
            

        

    

    


        


            


            

        

        


            

                search(){
            

        

    

    


        


            


            

        

        


            

                this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
            

        

    

    


        


            


            

        

        


            

                this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
            

        

    

    


        


            


            

        

        


            

                response => {
            

        

    

    


        


            


            

        

        


            

                this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                error => {
            

        

    

    


        


            


            

        

        


            

                console.log(error);
            

        

    

    


        


            


            

        

        


            

                this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                )
            

        

    

    


        


            


            

        

        


            

                this.ipt_value='' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


        

    

前言：

        本次案例是一個基于 Vue2 的全局事件總線通信的仿 Github 用戶搜索模塊，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（發送請求時需要將輸入的用戶名稱綁定替換掉xxx），如果對全局事件總線不太熟練的小伙伴可以看這篇文章：http://t.csdn.cn/oHEOWhttp://t.csdn.cn/oHEOW

文章目錄：

一：效果展示 

二：代碼分析

2.1 綁定自定義事件 

2.2 觸發自定義事件 

三：源碼獲取

---

一：效果展示 

• 未搜索用戶頁面

•  查詢后加載中頁面

•  查詢成功渲染頁面

• 點擊頭像或下部鏈接進入用戶主頁

•  查詢失敗頁面報錯提示

---

二：代碼分析

代碼共分為了兩個子組件，一個是搜索組件（Search），另一個是列表組件（List），其次search組件中輸入框v-model雙向數據綁定，點擊搜索后開始查詢，其中過程分為了四步：第一是未搜索的歡迎頁面背景，第二是請求未加載出來的loading背景，第三是渲染用戶列表，第四是請求失敗的報錯提示頁面背景。

2.1 綁定自定義事件 

綁定自定義事件在List組件中，data中的數據是定義了userinfo對象來存放其四個狀態的布爾值，后續的數據傳遞是直接傳遞userinfo這個對象，使用 $on 綁定自定義事件 getuserinfo，當這個事件觸發時執行后面的箭頭回調函數，將傳遞來的對象接收并覆蓋掉data中原有的四個狀態布爾值。

 


    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:'List',
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                UserInfo:{
            

        

    

    


        


            


            

        

        


            

                iswelcome:true,
            

        

    

    


        


            


            

        

        


            

                isloading:false,
            

        

    

    


        


            


            

        

        


            

                users:'',
            

        

    

    


        


            


            

        

        


            

                error:'' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                mounted(){
            

        

    

    


        


            


            

        

        


            

                this.$bus.$on('getUserInfo',(datas)=>{
            

        

    

    


        


            


            

        

        


            

                // console.log('list組件收到了傳來的用戶數據',res); 
            

        

    

    


        


            


            

        

        


            

                this.UserInfo=datas
            

        

    

    


        


            


            

        

        


            

                console.log(datas);
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

2.2 觸發自定義事件 

點擊搜索按鈕即可使用 $emit 觸發自定義事件，在請求成功前會將 isloading 改為true，其余改為false進行數據傳遞，傳遞給 list 組件后期就會顯示出loading的背景頁面，其余同理

 


    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:'Search',
            

        

    

    


        


            


            

        

        


            

                data(){
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                ipt_value:'',
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                methods:{
            

        

    

    


        


            


            

        

        


            

                search(){
            

        

    

    


        


            


            

        

        


            

                this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
            

        

    

    


        


            


            

        

        


            

                this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
            

        

    

    


        


            


            

        

        


            

                response => {
            

        

    

    


        


            


            

        

        


            

                this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                error => {
            

        

    

    


        


            


            

        

        


            

                console.log(error);
            

        

    

    


        


            


            

        

        


            

                this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                )
            

        

    

    


        


            


            

        

        


            

                this.ipt_value='' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    




     來源：csdn  藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。  分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。  藍藍設計( www.0391cbd.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司