Vue.js: API에서 데이터를 가져와 하위 컴포넌트에 전달(간단한 예)

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>

아이는 다음과 같습니다.

  <script>

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

 }

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

   </template>

   <style>
  </style>

당신의 부모에게, 당신의 부모에게,messages소품으로서 자녀에게 전달하는 데이터 속성입니다.

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']
}

언급URL : https://stackoverflow.com/questions/47741770/vue-js-getting-data-from-the-api-and-passing-it-to-a-child-component-simple-ex