Cet article vous apporte des connaissances pertinentes sur vue3. Il expliquera également comment actualiser la page actuelle dans vue3. Les amis intéressés peuvent jeter un œil ci-dessous. J'espère que cela sera utile à tout le monde.
Généralement, lorsque nous supprimons ou modifions les données du tableau, nous demanderons à nouveau à l'interface d'actualiser les données du tableau. Si plusieurs interfaces doivent être demandées en même temps, vous ne pouvez pas ajuster chaque interface une par une. Nous devons utiliser un moyen plus convivial pour y parvenir.
La première et la plus intuitive consiste à actualiser directement la page actuelle, par exemple en utilisant les méthodes location.reload et $router.go(0)
. Cependant, cette méthode entraînera un écran blanc sur la page, ce qui n’est pas convivial. Alors pouvons-nous actualiser le composant vue actuel ? Nous savons que lorsqu'un composant Vue est restitué, tout son cycle de vie sera à nouveau exécuté et l'interface sera naturellement à nouveau sollicitée. Alors comment rafraîchir le composant actuel ? La première consiste à contrôler le rendu du composant de la page actuelle via v-if
. Dans le cas du composant de rendu router-view
, nous ajoutons directement v-if
à router-view
. Ensuite, en contrôlant cette condition de jugement, par exemple, nous l'appelons isRouterAlive
. location.reload和$router.go(0)方法
。但是这种方式会导致页面会有白屏情况,不友好。那么我们能不能刷新当前的vue组件呢?我们知道当vue的组件重新渲染以后它的整个生命周期会重新执行一遍,接口自然而然的也会重新请求一遍的。那么多如何刷新当前组件呢?首先是通过v-if
来控制当前页面组件的渲染。在有router-view
渲染组件的情况下,我们直接把v-if
加在router-view
上面。然后通过控制这个判断条件,比如我们就叫做isRouterAlive
。
那么这个判断条件如何控制呢?因为涉及到跨组件通信,所以需要使用provide/inject
。在router-view
组件中通过provide
提供一个relaod方法,当删除或者编辑完成表格数据以后,使用inject
触发reload方法。在reload方法里面我们来控制判断条件。当realod的时候isRouterAlive=false
,紧接着在nextTick
中设置为true
,这样就可以实现组件重新加载了。
下面我们来看看代码逻辑的实现。
首先修改router-view
provide/inject
doit être utilisé. Fournissez une méthode de rechargement via provide
dans le composant router-view
Après avoir supprimé ou modifié les données de la table, utilisez inject
pour déclencher la méthode de rechargement. Dans la méthode de rechargement, nous contrôlons les conditions de jugement. Une fois réel, isRouterAlive=false
, puis définissez-le sur true
dans nextTick
, afin que le composant puisse être rechargé. Jetons un coup d'œil à l'implémentation de la logique du code.
Modifiez d'abord le composant de rendu router-view
<template>
<div class="main">
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
provide(){
return {
reload: this.reload
}
},
data(){
return {
isRouterAlive: true
}
},
methods: {
reload(){
this.isRouterAlive = false
//通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
</script>
<template> <div> 首页 <button @click="handleSubmit">刷新</button> </div> </template> <script> export default { //通过inject获取祖先元素的reload方法 inject: ['reload'], data() { return { isRouterAlive: true, } }, methods: { handleSubmit() { // 假如这是一个编辑提交事件 // 这里是编辑请求的各种逻辑和接口... // 编辑执行成功,就刷新当前页面,请求reload this.reload() }, }, } </script>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!