【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里：
安装一个全局事件总线

new Vue({
  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;
    })
}

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

<div class="row">
        <div class="card" v-for="p in users" :key="p.login">
            <a :href="p.html_url" target="_blank">
            <img :src='p.avatar_url' style='width:'/>
            </a>
            <p class="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'
//无法显示，是为啥。（优先级还是……）