如何使用挂载vue里面的数据值js

Question

我想分配数据中的道具值并在挂载中使用这个数据值。现在我的做法是不工作：

dashboard.vue

<template> 
    <div> 
     <navigation-section :userid='userID' 
          :username='username' 
          :profilepic='profile_pic' 
          :unreads='unreads'> 
     </navigation-section> 
    </div> 
</template> 

<script> 
    import NavigationSection from '../components/NavigationSection'; 

    export default { 
     components: { 
      NavigationSection, 
     }, 

     data() { 
      return { 
       posts: [], 
       userID: '', 
       username: '', 
       unreads: [], 
       profile_pic: '', 
      } 
     }, 

     created() { 
      this.getNavInfo(); 
     }, 

     methods: { 
      getNavInfo() { 
       axios.get('get_nav_info').then(response => { 
        this.userID = response.data.userID; 
        this.username = response.data.username; 
        this.profile_pic = response.data.profile_pic; 
        this.unreads = response.data.unreads; 
       }) 
      } 
     } 
    } 
</script> 

NotificationSection（dashboard.vue儿童）

<template> 
    <div> 
     <notification :userid='userid' :unreads='unreads'></notification> 
     <h1>{{ username }}</h1>  
     <img :src='profilepic' :alt='profilepic'> 


    </div> 
</template> 

<script> 
    import Notification from '../components/Notification'; 

    export default { 
     props:['userid', 'username', 'unreads', 'profilepic'], 
     components: { 
      Notification 
     } 
    } 
</script> 

通知（NotificationSection的孩子.vue）

<template> 
    <div> 
     // values shows in template 
     unreads array length: <div class="count" v-if='unreads.length > 0'>{{ unreads.length }}</div> 
     userid : <p>{{ userid }}</p> 
    </div> 
</template> 

<script> 
    export default { 
     props:['unreads', 'userid'], 

     computed: { 
      userID() { 
       return this.userid 
      } 
     }, 

     mounted() { 
      console.log(this.userID); // ** problem : in console.log shows a blank instead of id which is working on template. 
     } 
    } 

</script> 

我编辑了这个问题。值显示在模板中，但是当我想要使用内置的安装或事件中的道具值尝试访问脚本内部的数据值它不工作。提前谢谢你的帮助。

Answer 1

您可以使用计算性能：

export default { 
    props: ['userid'], 

    computed: { 
     userID() { 
      return this.userid 
     } 
    }, 

    mounted() { 
     console.log(this.userID); 
    } 
} 

或者干脆：

export default { 
    props: ['userid'], 

    mounted() { 
     console.log(this.userid); 
    } 
}