首页 文章

Vue Props不适用于子组件

提问于
浏览 次
2

我有已登录用户数据的根元素和用户配置文件组件我将登录的用户数据作为道具传递 .

但是当我尝试在子组件中调用User对象属性时，它会将错误抛出为undefined . 我没有看到子组件有任何 Value .

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 dev工具中看到授权用户获得更新，但其值不会在子组件上更新 .

vue.js vuejs2 vue-component

2 回答

  • 4

    你没有把它包含在这里，但我的猜测是你使用 camelCase 传递道具，但你需要使用 kebab-case 传递它（参见：camelCase vs kebab-case） . 所以一定要确保你做的事情：

    <child-component :authorized-user="AuthorizedUser"></child-component>
    回复于
  • 0

    这就解决了我的问题 . 我必须用儿童模板绑定道具 .

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

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

    </profile>
    回复于

相关问题