vue3中刷新實現

provide ： 向子組件以及子孫組件傳遞數據。接收兩個參數，第一個參數是 key，即數據的名稱；第二個參數為 value，即數據的值
inject ： 接收父組件或祖先組件傳遞過來的數據。接收一個參數 key，即父組件或祖先組件傳遞的數據名稱

通過依賴注入（provide和inject）實現自定義頁面刷新事件
原理： 給app.vue中router-view綁定v-if事件，在函數中控制v-if的值在短時間內由true到false再到true,從而使頁面達到刷新效果

刷新實現

app.vue

<template>
  <!-- 子路由 -->
  <router-view v-if="state.showRouter"></router-view>
  <!-- end 子路由 -->
</template>

<script lang="ts">
import { defineComponent, nextTick, provide, reactive, ref } from 'vue'
export default defineComponent({
  setup() {
    const state = reactive({
      showRouter: true,
    })
    function reload() {
      state.showRouter = false
      nextTick(() => {
        state.showRouter = true
      })
    }
    provide('reload', reload)
    return {
      state,
    }
  },
})

刷新頁面

需要用到刷新事件的子組件：

ArticleTable.vue子組件

import { inject } from 'vue'
//注入刷新事件,這里括號中的參數要對應上前面provide中的第一個參數
const reload: any = inject('reload')
const confirm = async (data: any) => {
  await article.DeleteAsync(data.articleId).then(() => {
    reload()
  })
}