我有一个根元素,它已经登录了用户数据,在用户配置文件组件上,我将登录的用户数据作为 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 开发工具中看到授权用户已更新,但其值未在子组件上更新。
最佳答案
你没有在这里包含它,但我的猜测是你正在使用 camelCase
传递 Prop ,但你需要使用 kebab-case
传递它(参见:camelCase vs kebab-case)。所以请确保您正在做:
<child-component :authorized-user="AuthorizedUser"></child-component>
关于vue.js - Vue Props 不适用于子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44408868/