Vue父组件向子组件传递对象(学习记录)
Vue父组件向子组件传递对象时遇到的问题
·
1.父组件部分,将数据发送给子组件
<template>
<div>
<div style="padding:50px 0 ; background: #2d2d2d;">
<!-- 新闻卡片组件(子组件) -->
<newsCard
:newsdata='newsdata'
/>
</div>
</div>
</template>
<script>
// 引入方法(忽略)
import {getRequest} from '../../api/api.js';
// 引入子组件
import newsCard from '../../components/newsCard/newsCard.vue'
export default {
components:{newsCard},
data(){
return{
//用于接受后端的值并且传输数值
newsdata:null
}
},
methods:{
// 获取文章数据
async getnews(){
await getRequest('website/article/detail/top/',{id:"9"}).then((res)=>{
//赋值
this.newsdata=res.data
})
},
},
mounted(){
this.getnews()
}
}
</script>
2.子组件收
<script>
export default {
data(){
return{
}
},
// 接收父组件发来的值
props:{
// 文章数据
newsdata:{
//type限定子组件的类型,如果是数组就写arr,字段有特殊颜色,不然就是单词错了
type: Object,
}
},
}
</script>
至此传输完成,在子组件里直接插值语法用就行 ,不用this
个人学习记录,如有误,望指正。
更多推荐
已为社区贡献1条内容
所有评论(0)