VUE3中实现刷新

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()
  })
}

参考

https://blog.csdn.net/weixin_42088314/article/details/116400364

上一篇:vue3小野森森-03-toRaw,markRaw,生命周期钩子,选项式provide及inject,组合式provide及inject,给provide及inject增加响应式,$refs


下一篇:前沿 | VLDB论文解读:阿里云超大规模实时分析型数据库AnalyticDB