在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 怎么把父組件的data對象數(shù)據(jù)傳給子組件,子組件用props接收后怎么使用的?

怎么把父組件的data對象數(shù)據(jù)傳給子組件,子組件用props接收后怎么使用的?

我使用單個數(shù)據(jù)傳給子組件沒有問題,傳對象就報錯了
子組件:

<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>

周末加班中。。。,還要趕項目,希望各位大神指點一下

回答
編輯回答
傻叼
// dutyinfo 類型為object  必傳參數(shù)   等號前面的為子組件props對應(yīng)的屬性 后面的對應(yīng)父組件的屬性
<now-info :dutyinfo="dutyinfo"></now-info>
2018年3月7日 03:34