在Vue中，我们经常遇到对数据进行增删改查的操作之后, 希望页面显示的是我们操作之后最新的数据, 为了避免重新做axios请求, 此时用到组件的刷新是很方便的了, 以下便是我做项目中总结的组件局部刷新的方法:
第一步 : 在 app.vue 中定义全局方法:如下
<template>
<div id="app" >
<router-view v-if="isReload"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data () {
return {
isReload: true
}
},
methods: {
reload () {
this.isReload = false
this.$nextTick(() => {
this.isReload = true
})
}
}
}
</script>
<style>
body{
margin:0;
padding:0;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
我们定义了全局的方法 reload( ); 原理就是通过控制组件容器的出现与消失, 达到重新渲染的效果 , 从而实现我们的目的;
第二步:在全局中定义了刷新的方法, 接下来就是要引入到需要刷新的组件中:
<script>
export default {
inject:["reload"],
name: "hello",
data() {
return {
}
},
mounted() {
//刷新调用此方法
this.reload();
}
};
</script>
