您现在的位置是:首页 > 技术教程 正文

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

admin 阅读: 2024-04-01
后台-插件-广告管理-内容页头部广告(手机)

前言:

        本次案例是一个基于 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中原有的四个状态布尔值。

2.2 触发自定义事件 

点击搜索按钮即可使用 $emit 触发自定义事件,在请求成功前会将 isloading 改为true,其余改为false进行数据传递,传递给 list 组件后期就会显示出loading的背景页面,其余同理


三:源码获取

私聊我即可,感谢支持

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索
排行榜