vue3 组件刷新 在A页面点击事件,B页面内容刷新教程(超实实用)

时间:2025-02-15 07:41:09

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

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

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

 /**
   * 重载方法
   */
  function reload() {
     = false
    nextTick(() => {
       = 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'

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

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


</script>

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