账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    怎么把父组件的data对象数据传给子组件,子组件用props接收后怎么使用的?
    33
    0

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

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

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

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 长弓难鸣 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部