Vue.js:从api获取数据并将其传递给子组件(简单示例)

我想在父组件上使用 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>

child 是这样的:

  <script>

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

 }

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

   </template>

   <style>
  </style>

最佳答案

在您的父级中，无需将 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});
   }
}

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

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

或者

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

child 需要将 messages 声明为属性。

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

关于Vue.js:从api获取数据并将其传递给子组件(简单示例)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47741770/