学习笔记——Vue中组件如何刷新

最新推荐文章于 2025-06-26 23:31:00 发布

一一GG

最新推荐文章于 2025-06-26 23:31:00 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： vue javascript js 前端

本文链接：https://blog.youkuaiyun.com/qq_41339126/article/details/118566560

前端学习专栏收录该内容

107 篇文章

订阅专栏

本文介绍了如何在单页面应用程序和uni-app中实现组件内容的即时刷新。对于单页面应用，通过使用v-if和父子组件通信实现刷新；在uni-app中，利用生命周期钩子如activated和onShow更新数据。这种方法确保了页面和组件在操作后能正确显示最新内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面中的组件中的内容需要在操作后及时刷新，该如何做？

这里有两种情况：1.单页面应用程序。2.在uni-app跳转页面后返回组件所在页面。

1.单页面应用程序

在组件所在页面做完某些操作时，可以使用v-if来控制组件刷新。

// 商品列表组件
// 当组件操作后需要更新
this.$emit("updateComponent", { msg: "本组件需要更新" })

// 父组件
<template>
    <goods-list @updateComponent="update" v-if="!isUpdate"></goods-list>
</template>

<script>
    export defalt {
        data() {
            return { isUpdate: false }    
        }
    },
    methods: {
        // 子组件中操作后需要跟新
        update() { 
            this.isUpdate = true
            setTimeout(() => { this.isUpdate = false })
        },

        // 父组件操作后，需要跟新
        updateSon() { 
            this.isUpdate = true
            setTimeout(() => { this.isUpdate = false })
        }
    }
</script>

2.在uni-app跳转页面后返回组件所在页面。

上述方法在uni-app中同样适用。但是在第二种情况时，可以有更简单的操作。

// 返回后，子组件需要更新
activated() { 
    // 重新获取数据
}

// 返回后，父组件需要更新
onShow() {
    // 重新获取子组件和父组件的数据
}