目录刷新页面时会出现变量闪烁问题解决办法是: v-cloakVue刷新当前页面,且页面不闪烁场景:刷新当前页的方法provide/inject 组合介绍provide/inject
在使用vue绑定数据的时候,刷新页面时会出现变量闪烁,
将代码修改如下:
<div class="#app" v-cloak>
<p>{{value.name}}</p>
</div>
作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深
provide
:是一个对象,或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西,也就是属性和属性值。(注意:子孙层的provide会掩盖祖父层provide中相同key的属性值)inject
:一个字符串数组,或者是一个对象。属性值可以是一个对象,包含from和default默认值,from是在可用的注入内容中搜索用的 key (字符串或 Symbol),意思就是祖父多层provide提供了很多数据,from属性指定取哪一个key;default指定默认值。在 App.vue 内声明 reload 方法,控制 router-view 的显示或隐藏,从而控制页面的再次加载
<template>
<div id="app" v-if="isRouterAlive">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
export default {
name: 'App',
provide() {
return {
reload: this.reload
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
this.isRouterAlive = false
this.$nextTick(() => {
this.isRouterAlive = true
})
}
}
}
在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加…),在子组件内引入(inject)然后直接this.reload()调用,即可刷新当前页面。
export default {
inject: ['reload'],
methods: {
login() {
this.reload()
}
}
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue解决刷新页面时会出现变量闪烁的问题
本文链接: https://www.lsjlt.com/news/163584.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0