コンポーネント内でVue.js小道具が定義されていません。

Question

親appには、サーバから正しく入力されているオブジェクトmessagesがあります。しかし、chat-roomコンポーネントの小道具messagesは、親のmessagesから給餌されていません。私は何が欠けているのですか？ここで

は私の刃テンプレートです：ここで

<chat-room></chat-room> 
<chat-composer v-on:messagesent="addMessage"></chat-composer> 

は私chat-roomコンポーネントである：ここでは

<template> 
    <div class="chat-room"> 
    <chat-message v-for="message in messages" :message="message"></chat-message> 
    </div> 
</template> 

<script> 
    export default { 
    props : ['messages'], 
    } 
</script> 

は私app.jsです：あなたがいないなら

Vue.component('chat-message', require('./components/ChatMessage.vue')); 
Vue.component('chat-room', require('./components/ChatRoom.vue')); 
Vue.component('chat-composer', require('./components/ChatComposer.vue')); 

const app = new Vue({ 
    el: '#app', 
    data: { 
    messages: [] 
    }, 
    methods: { 
    addMessage(message) { 
     this.messages.push(message); 
     axios.post(base_url+'/room/1/write_message', message).then(response => { }); 
    } 
    }, 
    created() { 
    axios.get(base_url+'/room/1/messages').then(response => { 
     this.messages = response.data; 
     console.log(this.messages); //this returns an Array[4]! 
    }); 
    } 
}); 

Answer 1

理由chat-roomコンポーネント内のメッセージは、そのコンポーネントに渡されていないためです。

変更：

<chat-room></chat-room> 

的には：

<chat-room :messages="messages"></chat-room> 

・ホープ、このことができます！