Vue子组件重新渲染

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

small xie

6045人浏览 · 2020-02-17 07:31:25

small xie · 2020-02-17 07:31:25 发布

vue2 子组件强制刷新

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

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

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

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

Vue 子组件强制重新生成DOM的实现

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

 
   /**
 * 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>


 
  

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^