vue.js - Vue Props 不适用于子组件

Question

我有一个根元素，它已经登录了用户数据，在用户配置文件组件上，我将登录的用户数据作为 props 传递。

但是当我尝试在子组件中调用 User 对象属性时，它会抛出未定义的错误。我在子组件中看不到任何值(value)。

应用程序.js

Vue.component("usersmanagment", require("./components/usersmanagment"));

const app = new Vue({
    el: "#app",
    components: {
        'v-select': vSelect
    },
    data() {
        return {
            AuthorizedUser: {
                Email : "",
                FirstName : "",
                LastName : "",
                CreatedUtcDateTime : "",
                IsActive : ""
            }           
        };
    },
    mounted() {
        let vm = this;      
        vm.getAuthorisedUserProfile();
    },
    methods: {
        getAuthorisedUserProfile() {
            let vm = this;          
            // just return auth user data
    }

});

我正在传递 Prop 的子组件

module.exports = {
    props : ["AuthorizedUser"],

};

在我的 View 文件中我是 Asp.Net MVC

<usersmanagment inline-template>
        <input type="text" class="form-control" v-model="AuthorizedUser.FirstName">
</usersmanagment> 

我可以在 vue chrome 开发工具中看到授权用户已更新，但其值未在子组件上更新。

Answer 1

你没有在这里包含它，但我的猜测是你正在使用 camelCase 传递 Prop ，但你需要使用 kebab-case 传递它(参见:camelCase vs kebab-case)。所以请确保您正在做:

<child-component :authorized-user="AuthorizedUser"></child-component>