Vue.js：从api获取数据并将其传递给子组件（简单示例）

Question

我想在父组件上使用 axios 包发出 ajax 请求，并将返回的数组传递给子组件，以便它可以迭代数组并构建布局。我有以下代码。

家长是这样的：

<script>


     import Box from './Box';
     import axios from 'axios';

   export default {
       name : "messagespainel",
       data: function() {
       return {messsages: []}  //should I use data to pass the ajax returned array to the child
    },
         props: ['messages']  //should I use props to pass the ajax returned array to the child
  }


   mounted : 
   {

        axios.get('http://www.omdbapi.com/?s=star&apikey=mykey').then(response => {  this.messsages = response.data.Search});


    }

 </script>

   <template>

  <div>
 <box messages="this.messages"></box> My mind bugs at this point. How to refer to messages?
  </div>

  </template>

孩子是这样的：

  <script>

export default {
name: "box",
props: ['mensagens']

 }

 </script>
  <template>
   <div>
 <div v-for="message in messages" > 
  {{ message}}
  </div>
  </div>

   </template>

   <style>
  </style>

Answer 1

在您的父级中，无需声明messages为 prop，它是您传递给子级的数据属性。

import Box from './Box';
import axios from 'axios';

export default {
   name : "messagespainel",
   data: function() {
     return {messages: []}  
   },
   mounted() {
     axios.get('http://www.omdbapi.com/?s=star&apikey=mykey')
       .then(response => {  this.messages = response.data.Search});
   }
}

在模板中，需要绑定属性。

<box v-bind:messages="messages"></box>

或者

<box :messages="messages"></box>

孩子需要声明messages为财产。

export default {
  name: "box",
  props: ['messages']
}