Vue 重置组件到初始状态的方法示例

来源：懂视网责编：小采时间：2020-11-27 22:06:30

Vue 重置组件到初始状态的方法示例

Vue 重置组件到初始状态的方法示例:Vue 通过直接强制刷新 DOM 来达到重置组件的效果，这样可以重置一些组件的动画以及组件内初始的数据强制重新生成 DOM 的实现原理：强制重新生成 DOM 可以通过 Vue 中的 key 来实现。在 Vue 更新 Dom 时，如果 key 值相同则会对原有组件进行复用，如

推荐度：

点击下载本文 文档为doc格式

导读Vue 重置组件到初始状态的方法示例:Vue 通过直接强制刷新 DOM 来达到重置组件的效果，这样可以重置一些组件的动画以及组件内初始的数据强制重新生成 DOM 的实现原理：强制重新生成 DOM 可以通过 Vue 中的 key 来实现。在 Vue 更新 Dom 时，如果 key 值相同则会对原有组件进行复用，如

Vue

通过直接强制刷新 DOM 来达到重置组件的效果，这样可以重置一些组件的动画以及组件内初始的数据

强制重新生成 DOM 的实现

原理：强制重新生成 DOM 可以通过 Vue 中的 key 来实现。在 Vue 更新 Dom 时，如果 key 值相同则会对原有组件进行复用，如果不同，则会重新生成。

代码示例：

每次点击 refresh 按钮，Demo 组件都会重新生成

组件：

/**
 * Demo.vue
 */
<template>
 <div>Demo</div>
</template>
<script>
 export default {
 data () {
 return {}
 },
 created: function () {
 console.log('created')
 }
 }
</script>

主页面：

/**
 * Index.vue
 */
<template>
 <div>
 <Demo :key="id"></Demo>
 <button @click="refresh">refresh</button>
 </div>
</template>
<script>
 import Demo from './Demo'
 export default {
 data () {
 return {
 id: +new Date()
 }
 },
 methods: {
 refresh: function () {
 this.id = +new Date()
 }
 },
 components: {
 Demo
 }
 }
</script>

注：

对 +new Date() 的说明：
4 个结果一样,都是返回当前时间的毫秒数
alert(+new Date())
alert(+new Date)
var a=new Date()
alert(a.valueOf())
alert(a.getTime())

补充：vue强制刷新组件

把一个组件重置到初始状态是一个常见的需求，推荐的做法有两种，一种是父组件重置子组件的 prop，另一种是子组件暴露一个重置的方法供父组件调用。但有些时候，子组件既没有提供重置的方法，也没提供 prop 来重置自己的状态。更重要的是，这个子组件我们还动不了。于是我们就需要一种 hack 的方式来强制子组件重置到初始状态。方法如下：

<component v-if="hackReset"></component>

this.hackReset = false
this.$nextTick(() => {
this.hackReset = true
})

v-if 在切换时，元素及它的绑定数据和组件都会被销毁并重建

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue 重置组件到初始状态的方法示例

推荐度：

点击下载本文 文档为doc格式

标签： VUE 的方法的方式

热门焦点

Vue 重置组件到初始状态的方法示例

Vue 重置组件到初始状态的方法示例

Vue 重置组件到初始状态的方法示例

最新推荐

猜你喜欢

热门推荐