P160-首页开发-TabControl的开发

<tab-control class="tab-control" :titles="['流行','精选','新款']"></tab-control>

这里：titles 一定要加：去绑定，只有这样['流行','精选','新款'] 才当作变量显示到页面（如  流行 精选  新款），否则，这一箩筐就会当成字符串['流行','精选','新款']显示在页面 

<tab-control class="tab-control" :titles="['流行','精选','新款']"></tab-control>

.tab-control {
  position: sticky;
  top: 44px;
}

在Home里加class="tab-control"，并且给它加上粘性定位，保证首页在使用tab-control组件时，这里具备这个粘性属性（这个属性对浏览器有要求）

import HomeSwiper from "./childComps/HomeSwiper";
import RecommendView from "./childComps/RecommendView";
import FeatureView from "./childComps/FeatureView";

import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/content/tabcontrol/TabControl";

import {getHomeMultidata} from "network/home";

其次，在Home首页这里import引入组件，要按类合理写在一起，这样后期维护不会乱

保存商品的数据结构：

 请求数据的方法：

解释一下，这里的请求到的res是局部变量，函数执行完会被自动销毁，我们要想办法保存这个变量，并且能访问到这里面的数据。于是用了下面的方法

 将res.data.banner.listres.data.recommend.list分别存到了data()里的banners和recommends

 这个生命周期函数created()里的请求数据的内容可以抽出来封装到methods里面称为一个方法，这样在creaed()里就调用该方法，具体如下

 这么做有一个优点，可以调用getHomeGoods(type) 往里面传type参数，

this.getHomeGoods('pop')
this.getHomeGoods('new')
this.getHomeGoods('sell')

这里先来回顾一下vue的命名规范