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

柔光的暖阳◎ 2022-10-18 12:55 386阅读 0赞

> 在页面中的组件中的内容需要在操作后及时刷新，该如何做？
> 
> 这里有两种情况：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() {
        // 重新获取子组件和父组件的数据
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，386人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 实现局部组件刷新

在 vue 项目里想实现组件的局部刷新，我用到过的方法整理了一下： 1、 provide / inject 方法使用 v-if 方法来控制 router-view 的

我不是女神ヾ/ 2023年01月03日 04:57/ 0 赞/ 139 阅读

相关学习笔记——Vue中兄弟组件之间传值

-------------------- > 在vue中，我们在使用不同组件时，可能在同一个页面使用的两个组件具有耦合性，组件之间可能会需要相互传值。以下就是三种兄弟组件之间

野性酷女/ 2022年11月21日 04:08/ 0 赞/ 1985 阅读

相关学习笔记——Vue中父子组件传值

-------------------- > 在vue中，使用组件时，我们可能会在一个页面级组件中调用其他功能组件，例如数量加减的组件，那么如何使父子组件之间进行通信哪？

左手的ㄟ右手/ 2022年11月20日 08:20/ 0 赞/ 121 阅读

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

> 在页面中的组件中的内容需要在操作后及时刷新，该如何做？ > > 这里有两种情况：1.单页面应用程序。2.在uni-app跳转页面后返回组件所在页面。 1.单页面应用程

柔光的暖阳◎/ 2022年10月18日 12:55/ 0 赞/ 387 阅读

相关 Vue学习（动态组件、组件路由缓存keepalive）-学习笔记

文章目录 Vue学习（动态组件、组件路由缓存keepalive）-学习笔记动态组件组件路由缓存keepalive

墨蓝/ 2022年10月04日 15:00/ 0 赞/ 150 阅读

相关 Vue学习笔记（五）——组件与实例

参考文档：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 组件与实例定义的几个不同点： 1.

叁歲伎倆/ 2022年03月10日 14:40/ 0 赞/ 143 阅读

相关 Vue学习笔记(七) 组件

0、入门在开始正式讲解组件之前，我们首先来看一个简单的例子： <!DOCTYPE html> <html> <head>

水深无声/ 2021年11月05日 10:26/ 0 赞/ 257 阅读

相关【Vue】学习笔记四：组件

文章目录 @\[TOC\] 组件全局组件定义的三种方式组件中展示数据和响应事件【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象使用\`c

绝地灬酷狼/ 2021年09月20日 23:46/ 0 赞/ 453 阅读

相关 vue强制刷新组件

前言：在开发过程中，有时候会遇到这么一种情况，通过动态的赋值，但是dom没有及时更新，能够获取到动态赋的值，但是无法获取到双向绑定的dom节点，这就需要我

迷南。/ 2021年09月16日 07:40/ 0 赞/ 401 阅读

相关下拉刷新组件（Vue版）

![在这里插入图片描述][20200621225047544.gif] <!DOCTYPE html> <html> <head> <m

Myth丶恋晨/ 2021年07月25日 00:08/ 0 赞/ 390 阅读