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