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를 선언 할 필요가 없습니다, 당신이 전달하는 데이터 속성입니다 아이에게.

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