vue子集调用父级内的数据并展示的时候
在vue3中数据进行调用的时候，我们需要进行数据的一些操作
子级 ResourceList.vue
父级 ResourceHome.vue
父级 ResourceHome.vue中
<template>
<ResourceList :resourceChild="resource"></ResourceList>
<template>
<script>
<script>
import {toRefs, reactive} from "vue";
import ResourceList from '@/components/ResourceList.vue';
export default {
components:{
ResourceList,
},setup(){
const data=reactive({
resource:[
{
_id:"1",
title:"新闻1",
description:"新闻新闻",
type:"video",
link:""
},
{
_id:"2",
title:"新闻2",
description:"新闻新闻",
type:"video2",
link:""
},
{
_id:"3",
title:"新闻3",
description:"新闻新闻",
type:"video3",
link:""
},
{
_id:"4",
title:"新闻4",
description:"新闻新闻4",
type:"video",
link:""
},
{
_id:"5",
title:"新闻5",
description:"新闻新闻5",
type:"video",
link:""
},
{
_id:"6",
title:"新闻6",
description:"新闻新闻6",
type:"video",
link:""
},
{
_id:"7",
title:"新闻7",
description:"新闻新闻7",
type:"video",
link:""
}
]
})
return{...toRefs(data)}//数据解包
}
}
</script>
子级 ResourceList.vue 中调用写在父级的内容
<template>
<ul class="list-group mb-3">
<li v-for=" item in resourceChild" :key="item._id" class="list-group-item d-flex justify-content-between bg-light">
<div class="text-success">
<h6 class="my-0">{{item.title}}</h6>
<small class="text-muted">{{item.description}}</small>
</div>
<span class="text-muted">{{item.time}}</span>
</li>
</ul>
</template>
<script>
export default {
props:{
resourceChild:{
type:Array,
default:[] //还有一种写法 default ()=>[]
}
}
}
</script>
注意：
1.子级调用父级的数据的时候是使用props来接收数据 同样是：前的是接收来的数据，应该被接收页面中使用props来接收
2.数据的写法的改变使用了reactive的写法,同时还有数据的解包
3.在接收的数据的时候，当使用v-for循环的时候，可以看到数据的改变，写法会有所不同
eg: v-for ="item in resourceChild" :key = "item._id"
解释：resourceChild 是刚才props从父级那里接收到的数据，而item是声明的一个变量用来循环resourceChild里面的数据，因为是循环li,所以:key的值就是里面多个中的一个，所以是用Item._id
