子コンポーネントでVueの小道具が動作しない

Question

ユーザーデータとユーザープロファイルコンポーネントにログインしているルート要素があります。ログインしたユーザーデータを小道具として渡しています。

しかし、子コンポーネントでUserオブジェクトのプロパティを呼び出そうとすると、定義されていないエラーがスローされます。子コンポーネントには値がありません。子コンポーネントよりも

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>