实现子组件的刷新

介绍

我使用的是vue3.2的写法。
背景是我希望在用户选中相应的设备id之后刷新子组件

实现原理

修改子组件的v-if改为false再改成true
我之前使用的是直接赋值，但是发现并没有用，可能v-if监听是有周期的，在两次赋值之间并没有进行监听

发现了nextTick方法，主要解释是

$nextTick是Vue中的一个方法，用于在下一次DOM更新循环结束之后执行回调函数。它的作用是确保在更新DOM后再执行一些操作，以避免出现不准确的结果。

在Vue 2.x中，$nextTick是一个实例方法，可以直接在组件实例上调用。它接受一个回调函数作为参数，这个回调函数会在DOM更新完成后被调用。

在Vue 3.x中，$nextTick方法被移除了，取而代之的是使用nextTick函数。你可以通过导入nextTick函数来使用它，例如：

import { nextTick } from ‘vue’;

nextTick(() => {
// 在DOM更新后执行的操作
});
需要注意的是，在Vue 3.x中，nextTick函数是一个独立的函数，而不是组件实例的方法。所以你不需要再通过this来调用它。

我使用的是vue3.2
所以代码如下

代码

在调用的方法内加上

  isshow.value=false;
  nextTick(()=>{
        isshow.value=true;
      })

js代码外部定义是否展示的常量

const isshow = ref(true);

在调用的组件上加上v-if

  <ChartShui v-if="isshow"/>

并且在js引入处加上nextTick的引入

import { ref, reactive, onMounted ,getCurrentInstance,nextTick } from 'vue'