vue2.0饿了么--header组件的编写遇到的坑

header组件编写的步骤

header 组件需完成：

1.头部商家信息的展示

2.完成公告部分

3.弹出层的实现

在这个过程中，很重要的一步是通过异步请求后端数据接口，接收并渲染相关商家数据。

如何实现：使用第三方插件 vue-resource，通过在父组件（App.vue）发送 Ajax 请求获得后端数据，然后通过 header 的 Prop 属性将数据传递给 header 组件。

过程

• 通过props属性接受到父组件App.vue传过来的数据

export default {
  props: {
    seller: {
      type: Object
    }
  },
 created () {
   this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
  }

• 之后，编写dom结构

<div v-if="seller.supports" class="supports">
    <span class="icon" :class="classMap[seller.supports[0].type]"></span>
    <span class="text">{{seller.supports[0].description}}</span>
</div>

之后设置css的样式

遇到的问题

此处显示数据的先后不定，可以显示[‘decrease’, ‘discount’, ‘special’, ‘invoice’, ‘guarantee’]任意一个，因此笔者测试了一下顺序打乱后在上面红框中的显示是否会跟着改变。打乱顺序如下：

此处保存后（没有重新运行），显示并不会跟着改变。因此需要保存后重新运行，显示才会跟着改变。

参考文献

https://blog.csdn.net/weixin_30915275/article/details/96041732

https://blog.csdn.net/qq_22317389/article/details/81098408