VueJS-将数据从父组件传递到子组件

Question

我正在构建一个标签表，单击每个标签后，该表将触发REST API来获取内容。也就是说，它最初会获取产品的内容。然后，如果我单击“定价”标签，它将获取内容并显示在其标签详细信息中。目前，我只能在点击标签页后触发ajax。如何在其标签上显示内容？

<div class="report-tabs-wrapper" id="report-tabs">
    <tabs>
        <tab name="Product" :selected="true">
            {{data}}
        </tab>
        <tab name="Pricing">
            {{data}}
        </tab>
        <tab name="Logistics">
            {{data}}
        </tab>
    </tabs>
</div>
<script>
    Vue.component("tabs", {
        template: `
            <div>
                <div class="tabs">
                  <ul class="nav nav-tabs report-tabs">
                    <li v-for="tab in tabs" :class="{ 'active': tab.isActive }">
                        <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
                    </li>
                  </ul>
                </div>

                <div class="tabs-details">
                    <slot></slot>
                </div>
            </div>
        `,

        data() {
            return { 
                tabs: [],
                currentName : 'Product',
                data: []
            };
        },

        created() {
            this.tabs = this.$children;
        },
        mounted() {
            this.selectTab();
        },

        methods: {
            selectTab(selectedTab) {
                if(typeof selectedTab !== "undefined"){
                    this.currentName = selectedTab.name;
                }
                
                this.tabs.forEach((tab) => {
                    tab.isActive = tab.name == this.currentName;                
                });

                axios.get('/api/getList')
                .then(function (response) {
                    console.log(response.data); // want to pass response.data to {{data}} on each tab
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        }
    });

    Vue.component("tab", {
        template: `

        <div v-show="isActive"><slot></slot></div>

        `,

        props: {
            name: { required: true },
            selected: { default: false },
            data: []
        },

        data() {
            return {
                isActive: false
            };
        },

        computed: {
            href() {
                return "#" + this.name.toLowerCase().replace(/ /g, "-");
            }
        },

        mounted() {
            this.isActive = "this.selected"
        }
    });

    new Vue({
        el: "#report-tabs"
    });
</script>

预先感谢您的帮助！