vue3 组件刷新 在A页面点击事件，B页面内容刷新教程（超实实用）

1.在APP.vue 文件中添加代码（或者在需要用的页面添加）只要执行该页面就会重新刷新页面，（reload）方法的好处，页面刷新，数据发生变化。如果要从A-B页面交互，个人建议可以使用store状态管理器来管理数据，再结合reload方法就可以不同页面相互交互

<template>
  <router-view :key="routerKey" v-if="data.isAlive"></router-view>
</template>

<script setup>
import {ref, onMounted,provide, nextTick} from 'vue'

 /**
   * 重载方法
   */
  function reload() {
    data.value.isAlive = false
    nextTick(() => {
      data.value.isAlive = true
    })
  }

  /**
   * 抛出重载方法
   */
  provide('reload', reload);

</script>

2.在A页面

添加代码

<template>
	<div @click="btn()">点击</div>
</template>
<script lang="ts" setup >
 import {onMounted, ref} from "vue";
 import { inject } from 'vue'

 /**
  * 调用home.vue重载方法
  */
 const reload:any = inject('reload')

 const btn=()=>{
   reload()// (调用)
 }


</script>

#前端综合社区开发人员    天梦星官网 (tmxkj.top)