VueJS - 如何將 Axios 響應數據從父組件傳遞到子組件？

Question

使用 VueJS & Axios，我如何檢索 API 數據並將其傳遞給多個子組件？ 我想通過道具檢索和傳遞這些數據，這樣我就不必通過子組件多次訪問 API。

目前，子組件正在返回“未定義”。

家長

<template>
    ...
    <my-child :foo="bar" />
    ...
    <my-other-child :foo="bar" />
    ...
</template>
<script>
    import axios from 'axios'
    ...
    mounted(){
        axios.get(...)
             .then(rsp => {this.bar = rsp.data.result})
             .catch(err => {console.warn(err)})
    }
    ...
</script>

孩子

<script>
    props: ['foo'],
    mounted(){
        console.log(this.foo)
    }
</script>

Answer 1

v-if= （及其對應物v-else ）根據 js 表達式的真值有條件地控制 DOM 中的內容。 您可以通過使用評估為 false 的 v-if 來限定任何節點（包括您的my-child組件），將其保留在 dom 之外。

 var app = new Vue({ el: '#app', data: { bar: null }, mounted () { setTimeout(() => this.bar = 'foo', 2500); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <div v-if="bar">bar is {{bar}}</div> <div v-else>bar is not initialized</div> </div> </div>