组件中未定义 Vue.js 道具答案

【问题标题】：Vue.js props not defined in Component组件中未定义 Vue.js 道具
【发布时间】：2017-07-08 11:04:16
【问题描述】：

父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]!
    });
  }
});

【问题讨论】：

你能在你使用chat-room组件的地方展示你的代码吗？
是的，我知道您已经显示了您的 ChatRoom.vue 文件的内容。我的意思是你能展示你是如何在你的应用程序中使用该组件的，即你在哪里/如何使用<chat-room></chat-room>？
我更新了问题。我正在使用一个简单的 html 标签

标签： javascript laravel vuejs2 vue-component

【解决方案1】：

您在chat-room 组件中看不到消息的原因是您没有将它们传递给它。

变化：

<chat-room></chat-room>

成为：

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

希望这会有所帮助！

【讨论】：