php局部刷新增删改查,Vue关于局部刷新

在Vue中，我们经常遇到对数据进行增删改查的操作之后, 希望页面显示的是我们操作之后最新的数据, 为了避免重新做axios请求, 此时用到组件的刷新是很方便的了, 以下便是我做项目中总结的组件局部刷新的方法:

第一步 : 在 app.vue 中定义全局方法:如下

export default {

name: 'App',

provide () {

return {

reload: this.reload

}

},

data () {

return {

isReload: true

}

},

methods: {

reload () {

this.isReload = false

this.$nextTick(() => {

this.isReload = true

})

}

}

}

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;

}

我们定义了全局的方法 reload( ); 原理就是通过控制组件容器的出现与消失, 达到重新渲染的效果 , 从而实现我们的目的;

第二步:在全局中定义了刷新的方法, 接下来就是要引入到需要刷新的组件中:

export default {

inject:["reload"],

name: "hello",

data() {

return {

}

},

mounted() {

//刷新调用此方法

this.reload();

}

};