Vue自定义组件强制销毁 刷新【重新渲染】
Vue的双向绑定用着确实方便,但自动档虽好,手动档也不是一无是处;在特定的情况下,还真的要手工触发“刷新”操作,目前有四种方案可以选择:
刷新整个页面(最low的,可以借助route机制)
使用v-if标记(比较low的)
使用内置的forceUpdate方法(较好的)
使用key-changing优化组件(最好的)
## v-if
这个例子,相同使用`dialogVisible`,关闭dialog正好`false`会销毁自定义组件,打开又true重新渲染
```typescript
<el-dialog
v-model="dialogVisible"
:close-on-click-modal="false"
:show-close="true"
title="请使用手机QQ扫描二维码"
width="30%"
>
<get-skey v-if="dialogVisible" />
</el-dialog>
```
## key-changing
原理很简单,vue使用 `key` 标记组件身份,当`key`改变时就是释放原始组件,重新加载新的组件。
```typescript
<template>
<div>
<span :key="key"></span>
</div>
</template>
<script>
export default {
data() {
return {
key: 0
}
},
methods: {
handleUpdateClick() {
this.key += 1
}
}
}
</script>
```
版权声明:
作者:tianya
链接:https://tya.zone/p/67.html
来源:天涯博客
文章版权归作者所有,未经允许请勿转载。
THE END
0
二维码
海报
Vue自定义组件强制销毁 刷新【重新渲染】
Vue的双向绑定用着确实方便,但自动档虽好,手动档也不是一无是处;在特定的情况下,还真的要手工触发“刷新”操作,目前有四种方案可以选择:
刷新整个页面(……
![](https://tya.zone/wp-content/uploads/2023/04/logo.png)
共有 0 条评论