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

个人学习记录，如有误，望指正。