首页tab栏切换 想要的效果是:加载过的数据列表不要重新加载(用到 父传子)

180 阅读1分钟

首页tab栏切换 想要的效果是:加载过的数据列表不要重新加载

具体做法就是:
 封装一个文章列表组件
 然后在频道列表中把文章列表遍历出来
 
因为文章列表组件中请求获取文章列表数据需要频道 id,所以 频道 id 应该作为 props 参数传递给文章列表组件,为了方便,我们直接把频道对象传递给文章列表组件就可以了。

在文章列表中请求获取对应的列表数据,展示到列表中。
最后把组件在频道列表中遍历出来,就像下面这样。

image.png

1、创建 src/views/home/components/article-list.vue props接收父组件 传递过来的频道对象

<template>
  <div class="article-list">文章列表</div>
</template>

<script>
export default {
  name: 'ArticleList',
  components: {},
   // props接收父组件 传递过来的频道对象
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less"></style>

2、在 home/index.vue 中注册使用,利用父传子方式 把频道对象传递给文章列表组件

image.png