怎么把父组件的data对象数据传给子组件，子组件用props接收后怎么使用的？

Question

我使用单个数据传给子组件没有问题，传对象就报错了
子组件：

<template>
  <div class="nowinfo" >
    <div class="nowinfo-header">今日信息</div>
    <div class="nowinfo-content">
       <div class="nowinfo-item now-date"><span>今 天 是:</span></div>
       <div class="nowinfo-item duty"><span>值班信息:</span> </div>
       <div class="nowinfo-item duty-tel"><span>值班电话</span> </div>
    </div>
    <div class="remind">温馨提示:你有2封未读邮件请及时查阅</div>
  </div>
</template>

<script>

  export default {
    name: 'newinfo',
    props:{
      dutyinfo:{
        type:Object,
        required:true
      }
    },
    
    mounted: function () {
    //  console.log(dutyinfo);
    },
    data(){
        return{
          duty:this.dutyinfo
        };
    },
    methods: {
     
    },
    computed: {
        
    }
  }
</script>

父组件：

<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
</style>
<template>
    <div class="home-main" >
        <Row :gutter="10">
            <Col span="6">
                <div class="now-info ">
                    <now-info v-bind="dutyinfo"></now-info>
                </div>       
            </Col>
            <Col span="12"></Col>
            <Col span="6"></Col>
        </Row>
    </div>
    </template>
<script>
import cityData from './map-data/get-city-value.js';
import nowInfo from './components/nowInfo.vue';
import attendanceCount from './components/attendance-count.vue';
import kalendarInfo from './components/kalendar-info.vue';
import subSchedule from './components/subSchedule.vue';
import subWorkLog from './components/sub-workLog.vue';
import subFileManage from './components/sub-fileManage.vue';
import subInfoRanking from './components/sub-infoRanking.vue';

export default {
    name: 'home',
    components: {
        "now-info":nowInfo,
        "attendance-count":attendanceCount,
        "kalendar-info":kalendarInfo,
        "sub-schedule":subSchedule,
        "sub-workLog":subWorkLog,
        "sub-file-manage":subFileManage,
        "sub-info-ranking":subInfoRanking
    },
    data () {
        return {
            dutyinfo:{
                date:'',
                dutyname:'李XX',
                dutyposition:'纪委书记',
                telNum:18246416213,
                unreadMailCount:2  
            }
           } 
    },
    computed: {
        date () {
          var date=new Date(); 
          var l = ["日","一","二","三","四","五","六"];  
          var year=date.getFullYear(); //获取当前年份   
          var mon=date.getMonth()+1; //获取当前月份   
          var da=date.getDate(); //获取当前日   
          var day=date.getDay(); //获取当前星期几   
          var str = "星期" + l[day];
          var nowDate = year + '年'+mon+'月'+da+'日'+' '+' '+str;
          return nowDate;
        }
    },
    methods: {

    }
};
</script>

周末加班中。。。，还要赶项目，希望各位大神指点一下

Answer 1

// dutyinfo 类型为object  必传参数   等号前面的为子组件props对应的属性 后面的对应父组件的属性
<now-info :dutyinfo="dutyinfo"></now-info>