如何实现vue组件的局部刷新?
正如标题,如何实现vue组件的局部刷新?这也是最近在做项目的时候遇到这样一个问题,因为我是在父组件调用子组件,展示子组件是通过v-show
定义的mode类型来实现的,所以在新增或编辑数据的时候都会对数据进行更新,所以在保存后需要对页面组件进行局部刷新,这个方法相信很多用过vue的老鸟也都用过,我也好久不用了,感觉有点生疏,所谓“好记性不如烂笔头”,所以特此整理一下,当做自己重新复习一遍,也为其他新的小伙伴提供参考。
我在项目中使用的是provide
与inject
实现VUE中组件局部刷新,在使用前我们先说一说provide
与inject
方法。
provide
是放在最上层的页面,可以实现传数据给它的子组件和多重孙组件,只需要在子孙组件中用inject
接收就可以了。
那么,具体怎么使用呢?
首先在app.vue写入provide
。
app.vue页面:
<template> <router-view v-if="isRouterAlive" /> </template> <script> export default { name: 'App', provide() { return { reload: this.reload, }; }, data() { return { isRouterAlive: true, }; }, methods: { reload() { this.isRouterAlive = false; this.$nextTick(() => { this.isRouterAlive = true; }); }, }, }; </script>
然后,在你需要刷新的组件中用inject
接收reload方法,然后调用,即可实现刷新。
export default { inject:["reload"], data() { return {}, }, methods:{ updateData(){ this.reload(); }, } }
声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 如何实现vue组件的局部刷新?
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 如何实现vue组件的局部刷新?