Github 用户查询案例【基于Vue2全局事件总线通信】

文章目录：

一：效果展示 

二：代码分析

2.1 绑定自定义事件 

2.2 触发自定义事件 

三：源码获取

---

一：效果展示 

• 未搜索用户页面

•  查询后加载中页面

•  查询成功渲染页面

• 点击头像或下部链接进入用户主页

•  查询失败页面报错提示

---

二：代码分析

2.1 绑定自定义事件 

<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 触发自定义事件 

<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>

---

三：源码获取