前言：
本次案例是一個(gè)基于 Vue2 的全局事件總線通信的仿 Github 用戶搜索模塊，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（發(fā)送請(qǐng)求時(shí)需要將輸入的用戶名稱綁定替換掉xxx），如果對(duì)全局事件總線不太熟練的小伙伴可以看這篇文章：http://t.csdn.cn/oHEOW
http://t.csdn.cn/oHEOW
文章目錄：
一：效果展示
二：代碼分析
2.1 綁定自定義事件
2.2 觸發(fā)自定義事件
三：源碼獲取
一：效果展示
-
點(diǎn)擊頭像或下部鏈接進(jìn)入用戶主頁
二：代碼分析
代碼共分為了兩個(gè)子組件，一個(gè)是搜索組件（Search），另一個(gè)是列表組件（List），其次search組件中輸入框v-model雙向數(shù)據(jù)綁定，點(diǎn)擊搜索后開始查詢，其中過程分為了四步：第一是未搜索的歡迎頁面背景，第二是請(qǐng)求未加載出來的loading背景，第三是渲染用戶列表，第四是請(qǐng)求失敗的報(bào)錯(cuò)提示頁面背景。
2.1 綁定自定義事件
綁定自定義事件在List組件中，data中的數(shù)據(jù)是定義了userinfo對(duì)象來存放其四個(gè)狀態(tài)的布爾值，后續(xù)的數(shù)據(jù)傳遞是直接傳遞userinfo這個(gè)對(duì)象，使用 $on 綁定自定義事件 getuserinfo，當(dāng)這個(gè)事件觸發(fā)時(shí)執(zhí)行后面的箭頭回調(diào)函數(shù)，將傳遞來的對(duì)象接收并覆蓋掉data中原有的四個(gè)狀態(tài)布爾值。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
this.$bus.$on('getUserInfo',(datas)=>{
-
-
-
-
-
-
-
2.2 觸發(fā)自定義事件
點(diǎn)擊搜索按鈕即可使用 $emit 觸發(fā)自定義事件，在請(qǐng)求成功前會(huì)將 isloading 改為true，其余改為false進(jìn)行數(shù)據(jù)傳遞，傳遞給 list 組件后期就會(huì)顯示出loading的背景頁面，其余同理
-
-
-
-
-
-
-
-
-
-
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
-
-
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
-
-
-
-
-
-
-
前言：
本次案例是一個(gè)基于 Vue2 的全局事件總線通信的仿 Github 用戶搜索模塊，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（發(fā)送請(qǐng)求時(shí)需要將輸入的用戶名稱綁定替換掉xxx），如果對(duì)全局事件總線不太熟練的小伙伴可以看這篇文章：http://t.csdn.cn/oHEOWhttp://t.csdn.cn/oHEOW
文章目錄：
一：效果展示
二：代碼分析
2.1 綁定自定義事件
2.2 觸發(fā)自定義事件
三：源碼獲取
一：效果展示
-
點(diǎn)擊頭像或下部鏈接進(jìn)入用戶主頁
二：代碼分析
代碼共分為了兩個(gè)子組件，一個(gè)是搜索組件（Search），另一個(gè)是列表組件（List），其次search組件中輸入框v-model雙向數(shù)據(jù)綁定，點(diǎn)擊搜索后開始查詢，其中過程分為了四步：第一是未搜索的歡迎頁面背景，第二是請(qǐng)求未加載出來的loading背景，第三是渲染用戶列表，第四是請(qǐng)求失敗的報(bào)錯(cuò)提示頁面背景。
2.1 綁定自定義事件
綁定自定義事件在List組件中，data中的數(shù)據(jù)是定義了userinfo對(duì)象來存放其四個(gè)狀態(tài)的布爾值，后續(xù)的數(shù)據(jù)傳遞是直接傳遞userinfo這個(gè)對(duì)象，使用 $on 綁定自定義事件 getuserinfo，當(dāng)這個(gè)事件觸發(fā)時(shí)執(zhí)行后面的箭頭回調(diào)函數(shù)，將傳遞來的對(duì)象接收并覆蓋掉data中原有的四個(gè)狀態(tài)布爾值。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
this.$bus.$on('getUserInfo',(datas)=>{
-
-
-
-
-
-
-
2.2 觸發(fā)自定義事件
點(diǎn)擊搜索按鈕即可使用 $emit 觸發(fā)自定義事件，在請(qǐng)求成功前會(huì)將 isloading 改為true，其余改為false進(jìn)行數(shù)據(jù)傳遞，傳遞給 list 組件后期就會(huì)顯示出loading的背景頁面，其余同理
-
-
-
-
-
-
-
-
-
-
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
-
-
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
-
-
-
-
-
-
