首页tab栏切换 想要的效果是:加载过的数据列表不要重新加载
具体做法就是:
封装一个文章列表组件
然后在频道列表中把文章列表遍历出来
因为文章列表组件中请求获取文章列表数据需要频道 id,所以 频道 id 应该作为 props 参数传递给文章列表组件,为了方便,我们直接把频道对象传递给文章列表组件就可以了。
在文章列表中请求获取对应的列表数据,展示到列表中。
最后把组件在频道列表中遍历出来,就像下面这样。
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 中注册使用,利用父传子方式 把频道对象传递给文章列表组件