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,
}
},
})
vue中reactive刷新页⾯
需要⽤到刷新事件的⼦组件：
ArticleTable.vue
import { inject } from 'vue'
//注⼊刷新事件，这⾥括号中的参数要对应上前⾯provide中的第⼀个参数
const reload: any = inject('reload')
const confirm = async (data: any) => {
await article.DeleteAsync(data.articleId).then(() => {
reload()
})
}
参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。