Javascript 如何在安装的vue js中使用数据值

我想在数据中分配道具值，并在数据中使用此数据值。目前，我的方法不起作用：

仪表板.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>

从“../components/NavigationSection”导入NavigationSection；
导出默认值{
组件：{
导航部分，
},
数据（）{
返回{
员额：[]，
用户标识：“”，
用户名：“”，
未读：[]，
个人资料图片：''，
}
},
创建（）{
这是getNavInfo（）；
},
方法：{
getNavInfo（）{
get（'get\u nav\u info'）。然后（响应=>{
this.userID=response.data.userID；
this.username=response.data.username；
this.profile_pic=response.data.profile_pic；
this.unreads=response.data.unreads；
})
}
}
}

通知部分（dashboard.vue的子项）

{{username}}
从“../components/Notification”导入通知；
导出默认值{
道具：['userid'，'username'，'unreads'，'profilepic']，
组成部分：{
通知
}
}

通知（NotificationSection.vue的子项）

//值显示在模板中
未读数组长度：{{unreads.length}
userid:{{userid}

导出默认值{
道具：['unreads'，'userid']，
计算：{
用户ID（）{
返回这个.userid
}
},
安装的（）{
console.log（this.userID）；//**问题：在console.log中，显示一个空白的id，而不是正在模板上工作的id。
}   
}

---

我已经编辑了这个问题。这些值显示在模板中，但当我想在mounted或event中使用props值尝试访问脚本中的数据值时，它不起作用。谢谢你的帮助

您可以使用计算属性：

export default {
    props: ['userid'],

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

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

或者简单地说：

export default {
    props: ['userid'],

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

---

问题似乎不在发布的代码中。你的意思是代码正常吗@贝尔特耶斯。这里有一个例子。唯一添加的是模板。它起作用了。我不知道。。它应该会起作用。但是我不能在mounted、created或任何方法中使用数据值。但是他们在模板中工作..你是如何传递它的？模板是什么？需要更多代码。当我试图访问挂载或创建它时，id将变为null或空白。这真的很奇怪。因为它显示在模板中：（嗯，你能用你的父组件模板更新这个问题吗？我用父代码编辑了这个问题。请看一下。@Ikbel

export default {
    props: ['userid'],

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

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

export default {
    props: ['userid'],

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