成都网站建设设计

将想法与焦点和您一起共享

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

Vue

创新互联长期为数千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为蔚县企业提供专业的网站设计、做网站,蔚县网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

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

强制重新生成 DOM 的实现

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

代码示例:

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

组件:

/**
 * Demo.vue
 */


主页面:

/**
 * Index.vue
 */


注:

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

补充:vue强制刷新组件

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



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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


网站名称:Vue重置组件到初始状态的方法示例
文章源于:http://chengdu.cdxwcx.cn/article/igcihg.html