vue2饿了么--header组件数据的获取

header组件中有商家的ming名称数据和评分等数据，这些数据可以通过异步请求后端的数据获得，header组件通过接受接着数据并渲染，我们可以在header的父组件App.vue中通过发送ajax请求，获取商家的相关数据，在通过props属性，实现父组件向自组件数据的传递

首先安装vue-resource；作为第三方插件，作为模块时引用要先去注册，所以在main.js中

/* 第三方插件用块的方式去引用的时候要去注册 */
import VueResource from 'vue-resource';
/* 注册*/
Vue.use(VueResource);

在created（）中发起ajax请求

import header from './components/header/header';
const ERR_OK = 0;
export default {
  //将data定义为一个函数，为了更好地封装
  data() {
    return {
      seller: {}
    };
  },
  created() {
    //请求的ajex地址,成功的回调，拿到一个response
    this.$http.get('/api/seller').then((response) => {
      //response是一个属性，将其转化为json对象
      response = response.body;
      //console.log(response);
      if (response.errno === ERR_OK) {
        // 数据在data字段中,将seller对象传给header组件，通过:seller
        this.seller = response.data;
        console.log(this.seller);
      }
    });
  },
  name: 'App',
  components: {
    'v-header': header
  }
};
</script>

在App.vue中引入header组件，并在模板中进行添加，然后将数据传递给header组件

 <v-header :seller = "seller">
    </v-header>

回到header组件中，通过props属性接收数据

export default {
//:seller = "seller" props接收传过来的seller对象
  props: {
    seller: {
      type: Object 
    }
  }
}

接收到数据之后就可以编写dom结构了。