vue3.x 使用 provide，inject 重载页面数据

最新推荐文章于 2024-09-11 13:58:21 发布

卿卿qing

最新推荐文章于 2024-09-11 13:58:21 发布

阅读量4.3k

点赞数 2

分类专栏： Vue 前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43900414/article/details/120783170

版权

Vue 同时被 2 个专栏收录

114 篇文章 3 订阅

订阅专栏

前端

76 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue3应用中通过provide和inject机制，在增加、修改或删除数据后触发页面刷新。通过App.vue的提供者和子组件的消费者实例，展示了如何在操作后调用刷新方法。同时，对比了与Vue2.x中nextTick的差异。

摘要由CSDN通过智能技术生成

1. 场景：在增加，修改或者删除一条记录的后希望当前页面可以重新刷新

2. 使用 provide，inject，nextTick 实现

2.1 App.vue 生产者提供者provide，提供刷新方法

<template>
  <div class="sofa-admin-app">
    <router-view v-if='isRouterAlive'/>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, provide, nextTick } from 'vue'
export default defineComponent({
  name: 'App',
  setup () {
    const data = reactive({
      isRouterAlive: true
    })
    const reload = () => {
      data.isRouterAlive = false
      nextTick(() => {
        data.isRouterAlive = true
      })
    }
    provide('reload', reload)
    return {
      ...toRefs(data),
      reload
    }
  }
})
</script>

2.2 子组件消费者使用者注入依赖，直接调用

import { defineComponent, reactive, toRefs, onMounted, inject } from 'vue'
export default defineComponent({
	setup () {
		const reload = inject('reload')
	}
	const deleteBusArea = () => {
      ElMessageBox({
        title: '提示',
        message: `${busArea.deleName}有${busArea.deleSonNumber}个下属区域，删除后其下区域将一并删除<br/>${busArea.deleName}或其下属区域下存在督导/拓展，删除此区域后，督导/拓展对应的区域请及时维护`,
        dangerouslyUseHTMLString: true,
        showCancelButton: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        api.businessArea.deleteCodeUp({ code: busArea.deleCode }).then(res => {
          reload()
        })
      }).catch(() => {
        busArea.busAreaType = 0
      })
    }
	return {
		reload,
		deleteBusArea 
	}
})

2.3 vue3.x nextTick的用法区别于vue2.x，vue3.x 引入依赖后直接使用

import { reactive, toRefs, nextTick } from 'vue'
setup () {
  const data = reactive({
    isRouterAlive: true
  })
  const reload = () => {
    data.isRouterAlive = false
    nextTick(() => {
      data.isRouterAlive = true
    })
  }
  return {
    ...toRefs(data),
    reload
  }
}

刷新页面的其他方法