Vue道具不适用于子组件

Question

我具有已登录用户数据的root元素，并且在用户个人资料组件上，我将登录的用户数据作为道具传递。

但是，当我尝试在子组件中调用用户对象属性时，它将引发未定义错误。我在子组件中看不到任何值。

app.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
    }

});

比子组件我传递道具

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

};

在我的视图文件中，我是Asp.Net MVC

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

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

Answer 1

您尚未在此处包括它，但我猜想是您正在使用传递道具，camelCase但您需要使用传递道具kebab-case（请参阅：camelCase vs kebab-case）。因此，请确保您正在执行以下操作：

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

Answer 2

这就是解决我的问题的方法。我必须将道具与子模板绑定。

<profile inline-template v-bind:authorized-user="authorizedUser">
        <div>

            <input type="text" v-model="authorizedUser.FirstName" class="form-control">
        </div>    

    </profile>