在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