vue3.0刷新页面、刷新组件(provide / inject在setup里使用)

  网上基本上都是vue2.0版本的写法，虽然vue3.0版本也兼容vue2.0的写法，但还是想用vue3.0的写法写一写,毕竟自己也是在学习中。

在setup()中使用provide / inject传值的方式来想实现页面刷新的效果，算了直接上代码吧！

在App.vue文件下

<!-- App.vue -->
<template>
  <router-view v-if="isRouterAlive"></router-view>
  <!-- 在router-view使用isRouterAlive或者是下面这种在组件中使用 -->
  <!-- <BLank v-if="isRouterAlive"></BLank> -->
</template>

<script>
import { ref, nextTick, provide } from "vue";
import BLank from "@/components/BLank.vue";
export default {
  name: "App",
  components: {
    BLank,
  },
  setup() {
    // 局部组件刷新
    const isRouterAlive = ref(true);
    const reload = () => {
      isRouterAlive.value = false;
      nextTick(() => {
        isRouterAlive.value = true;
      });
    };
    provide("reload", reload);

    return {
      isRouterAlive,
    };
  },
};
</script>

在test.vue对上面定义的方法进行调用

<!-- test.vue -->
<template>
  <div>
    <!-- input框输入值，点击按钮，看值会不会清空 -->
    <input type="text"> 
  </div>
  <button @click="ceshi">测试按钮</button>
</template>
<script>
import { inject } from "vue";
export default{
  setup() {
    const ceshi = inject("reload");

    return {
      ceshi,
    };
  },
};
</script>