Vue Props 不适用于子组件答案

【问题标题】：Vue Props not working for child componentVue Props 不适用于子组件
【发布时间】：2017-11-08 14:00:35
【问题描述】：

我有已登录用户数据的根元素，并且在用户配置文件组件上，我将登录的用户数据作为道具传递。

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

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 开发工具中看到授权用户得到更新，但其值在子组件上没有得到更新。

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

你没有在这里包含它，但我猜你是使用 camelCase 传递道具，但你需要使用 kebab-case 传递它（参见：camelCase vs kebab-case）。所以请确保你正在做：

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

【讨论】：

我将它分配给像 v-model="AuthorizedUser.FirstName" 这样的输入元素。我可以将 v-bind 与输入元素一起使用吗？
在您的子组件中？那将是道具的直接突变，应该会引发错误。您如何将 AuthorizedUser 值传递给子组件？
module.exports = { props : ["AuthorizedUser"], };
那是声明prop，你还需要把它传递给组件。这是一个 JSFiddle 向您展示我的意思：jsfiddle.net/qteo58jL
但是我在创建的函数中没有定义。

【解决方案2】：

请注意，类似的情况也可能是由于 v-for 中缺少 :key 属性造成的。

【讨论】：

【解决方案3】：

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

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

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

    </profile>

【讨论】：