vue 强制刷新子组件

问题:

1)因为父组件有缓存等因素，子组件创建后没有释放，传入参数无效

2)父组件的tab切换, 导致子组件一直存在, 没有刷新

解决方法:

方案一: 只要让子组件强制刷新就可以获取到props传递过来的值了, 使用v-if的特性（销毁和重建）可以强制刷新子组件

如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。

<template><div><child v-if="sonRefresh"></child></div>
</template>
<script>import child from '~/components/dam/child';export default {components: {child},data(){return {sonRefresh: true}},methods: {fatherMethod() {console.log('测试');},// 下面这段内容写在父组件获取值的地方//this.sonRefresh= false;//this.$nextTick(() => {//   this.sonRefresh= true;//});}};
</script>

方案二: 使用this.$forceUpdate强制重新渲染

如果要在组件内部中进行强制刷新，则可以调用this.forceUpdate强制重新渲染组件，从而达到更新目的。

<template><button @click="reload()">刷新当前组件</button>
</template>
<script>export default {name: 'comp',methods: {reload() {this.$forceUpdate();}}}
</script>

vue 强制刷新子组件相关推荐

vue清空子组件数据或强制刷新子组件
需求:每次点开子页面的时候,里面的表单内容都为空 this.$refs['form'].resetFields() 1.可以通过ref把表单数据绑定上在data中定义form写入对应key和valu ...
[vue] 如何在子组件中访问父组件的实例？
[vue] 如何在子组件中访问父组件的实例? this.$parent拿到父组件实例 this.$children拿到子组件实例(数组) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
Vue 强制刷新组件
使用 vue 进行开发时,如果要刷新当前路由,则调用 router.go(0)方法即可.但是某些情况下,我们可能要求仅仅刷新某个组件,而不是路由... 遇到的问题由于渲染数据较多,导致页面中部分数据 ...
vue 父刷新子_父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法...
场景: 我实际用到的是这样的,我父组件引用子组件related,父组件调用获取页面详情的方法,更新了state值related,子组件根据该related来渲染相关新闻内容,但是页面打开的时候总是先加 ...
vue 父刷新子_vue.js从父级中更新子组件数据
如何从父组件中更新子组件中的数据?我正在尝试从父级中更新autores属性,并让它更新子级数据.目前什么都没有发生,我认为我没有正确的数据链接.如果我将它作为数据添加到父组件中,那么当代码运行时,父组 ...
Vue强制刷新页面重新加载数据方法
业务场景在管理后台执行完增删改查的操作之后,需要重新加载页面刷新数据以便页面数据的更新实现原理就是通过控制router-view 的显示与隐藏,来重渲染路由区域,重而达到页面刷新的效果,show ...
vue elementui 搜索栏子组件封装
前言描述: 在基本项目中搜索栏.分页组件格式样式几乎是固定的,只是对应的数据不同,由于模块会随着需求的不断增加,可能会导致重复代码越来越多,这时可以用到子组件,需要将相同的模块代码统一封装,提高开发 ...
vue循环渲染子组件视图不更新问题
最近在写一个功能,使用v-for循环渲染子组件:代码如下: 当datas的数据发生改变时,按理子组件展现的数据也应该重新渲染,不过在使用的时候并没有达到这样的效果,但是将循环渲染的子组件改成html标 ...
实例化vue对象绑定子组件_Vue-双向数据绑定
实例 Vue.js应用的创建很简单,通过构造函数 Vue 就可以创建一个 Vue 的根实例,并启动 Vue: var app = new Vue({//选项 }); 变量 app 就代表了这个 Vue ...

vue 强制刷新子组件

vue 强制刷新子组件相关推荐

最新文章

热门文章