【GitHub案例】axios请求跨域问题——组件间的通信：全局事件总线的实施+工程化的显示

axios请求跨域跨域域名；
使用es6的模板语法，解析Wie模板字符串

methods:{searchUsers(){// es6的模板语法，解析Wie模板字符串
       axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response=>{
               console.log('请求成功了',response.data.items);},error=>{
               console.log('请求失败了',error.message);})}}

此番做法(gethub后端工程师调好了对接)就可以获取数据；
但是获取的数据在search组件里面：（要传到list组件去）通过全局事件总线，达到信息的传递；

第一：想好给谁传数据；

首先在main.js里：
安装一个全局事件总线

newVue({el:'#app',render:h=>h(App),beforeCreate(){Vue.prototype.$bus =this}})

其次是给list传递信息，那就通过一个生命周期钩子mounted： 绑定一个事件（起个事件名）
要么使用箭头函数，要么直接在menths里配置一个函数：

mounted(){this.$bus.$on('userList',(users)=>{
        console.log('我是list组件,收到了数据:',users);})}

然后是发送方触发自定义事件：并且传入参数

之后list组件就要赶紧保存数据

mounted(){this.$bus.$on('userList',(users)=>{
        console.log('我是list组件,收到了数据:',users);this.users = users;})}

收集而来的数据有很多：但用的的选项不是太多；
然后通过数据绑定完成数据渲染：

<divclass="row"><divclass="card"v-for="p in users":key="p.login"><a:href="p.html_url"target="_blank"><img:src='p.avatar_url'style='width: 100px'/></a><pclass="card-text">{{p.login}}</p></div></div>

完善github案例

第一种放式：通过全局事件总线来控制几个list数据显示（放在一个事件里面）
但是对于维护和可读性有很大的障碍苦难，不语义化！

那么如何将控制信息简易化，（封装成为一个对象信息）

这样看起来一下就明白这段代码是干甚！要改变什么数据！

methods:{searchUsers(){//  请求更新List的数据this.$bus.$emit('updateUserList',{isFirst:false,isLoading:true,errMsg:'',users:[]});// es6的模板语法，解析Wie模板字符串
        axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response=>{
                console.log('请求成功了',response.data.items);//触发事件this.$bus.$emit('updateUserList',{isLoading:false,errMsg:'',users:response.data.items});},error=>{
                console.log('请求失败了',error.message);this.$bus.$emit('updateUserList',{isLoading:false,errMsg:error.message,users:[]});})}}

data(){return{isFirst:true,//是否为初次展示isLoading:false,//是否处于记载中errMsg:'',//存储错误信息users:[]}},mounted(){this.$bus.$on('updateUserList',(dataObj)=>{// console.log('我是list组件,收到了数据:',users);this.isFirst = dataObj.isFirst;this.isLoading =dataObj.isLoading;this.errMsg = dataObj.errMsg;// this.users = users;
          console.log('我是dataobj',dataObj);this.users = dataObj.users
    
      })

但是有个地方不明白：

//改成
v-show='p.length'//无法显示，是为啥。（优先级还是……）