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

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

这里有两种情况：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() {
    // 重新获取子组件和父组件的数据
}