需求: 主页中有不同的频道,各个频道互不干扰,各自展示自己的文章数据 思路: 1、找到数据接口
2、封装请求方法
3、在组件中请求获取数据，将数据存储到 data 中
4、模板绑定展示
根据不同的频道加载不同的文章列表，
有一个 list 数组，用来存储数据列表查看 a 频道：请求获取数据，让 list = a 频道文章数据查看 b 频道：请求获取数据，让 list = b 频道文章数据查看 c 频道：请求获取数据，让 list = c 频道文章数据问题出现: 1,需要声明很多不同的频道名称,2,切换频道后重复发起数据请求;
优化解决方案:
准备多个 list 数组，每个频道对应一个，查看哪个频道就把数据往哪个频道的列表数组中存放，这样的话就不会导致覆盖问题
一一声明频道太麻烦,因此:
封装一个文章列表组件,然后在频道列表把文章列表遍历出来
,通过组件间传值的方式,把频道对象传给文章列表组件;文章列表组件使用频道对象中的id来获取文章列表数据;之后把文章列表组件在频道列表中遍历出来;
最终:
具体操作: 父组件home/index,其中channels变量存储了所有的频道信息 由channels遍历生成的article-list子组件接收父组件传来的每项channel数据, 根据channel中的参数获取数据,然后存储到list中,通过不断上拉/下拉刷新,将数据不断push/unshift到list数组中,(由于article-list子组件一直存在,所以数据一致被存储),然后遍历list生成子组件article-item,来进行每一项的渲染,该子组件接收父组件传来的article数据,该数据来源于遍历出来的list的每一项,在article-item根据article传来的数据渲染出具体的值,由于每个频道都是单独存在的,所以list的值也不同,互相切换互不影响,点击哪个频道,该频道发起请求,一次请求,只要不离开父组件home,就一直存在;
实现:
//home父组件 <van-tab v-for="channel in channels" :key="channel.id" :title="channel.name" > <!-- 频道文章列表 --> <article-list :channel="channel"></article-list> </van-tab> //article-list文章列表组件 <article-item v-for="(article, index) in list" :key="index" :article="article" ></article-item> //article-list具体项组件进行渲染具体项点击不同 频道时,存储的数据也不同,同时点击过的数据也会被存储下来;
