位置: IT常识 - 正文
推荐整理分享Github 用户查询案例【基于Vue2全局事件总线通信】(github账号在哪里看),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:github如何搜索用户名,github账号在哪看,github查找用户,github用户数,github如何查找用户,github查找用户,github用户数,github用户数,内容如对您有帮助,希望把文章链接给更多的朋友!
前言:本次案例是一个基于 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>三:源码获取私聊我即可,感谢支持
上一篇:程序员看过都说好的资源网站,看看你都用过哪些?(程序员才能看懂的梗)
友情链接: 武汉网站建设