Sivo 悉见

Vue在父组件中重新渲染子组件

匿名 · 更新于 2020/5/10

在父组件中添加如下代码

<template>
  <Child v-if="hackReset" />
</template>
<script>
  export default{
    data(){
      return {
        hackSet:false,
      }
    }
    methods:{
      //需要重新渲染时调用onClick
      onClick() {
        this.hackReset = false        this.$nextTick(() => {
            this.hackReset = true
          })
      }
    }
  }
</script>

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

$nextTick()
Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

JS事件循环