likes
comments
collection
share

vue中父子组件异步传递数据

作者站长头像
站长
· 阅读数 21

使用v-if指令来动态创建子组件

子组件中:

<template>
    <div>{{value}}</div>
</template>

<script>
export default {
    props: {
        value: {
            type: String
        }
    }
}
</script>

在父组件中:

<template>
    <div>
        <div v-if="viewReady">
            <child v-bind:value=""/>
        </div>
    <div>
</template>

<script>
export default {
    data() {
        return {
            viewReady: false
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            return new Promise(r=> {
                // request
                r()
            }).then(res => {
                this.viewReady = true
            })
        }
    }
}
</script>