Vue: Promise的异步请求

最新推荐文章于 2024-06-14 20:35:19 发布

Luemmy

最新推荐文章于 2024-06-14 20:35:19 发布

阅读量291

点赞数

分类专栏：前端 Vue 文章标签： vue js 前端

本文链接：https://blog.csdn.net/Xu190131/article/details/117746149

版权

本文探讨了在Vue应用中如何利用Promise来处理孙子组件到爷爷组件的异步数据传递，详细阐述了Promise在前端开发中的作用和实现方式。

摘要由CSDN通过智能技术生成

在孙子组件里面传数据

<template>
  <div class="grandson">
    <h5>子级</h5>
    <button @click="grandsonHello">sayHello</button>
  </div>
</template>

<script>
    export default {
        name: 'Grandson', // 组件名称
        methods: {
            // 向爷爷问好
            async grandsonHello () {
                const data = await new Promise((resolve, reject) => {
                    this.$dispatch('hello', {
                        data: 'Hello 爷爷',
                        resolve,
                        reject
                    })
                })
                console.log('grandson', data)
            }
        },
        created () { // 结束加载动画, 发起异步请求
            this.$on('helloSon', (data) => {
                console.log(data)
            })
        },
    }
</script>