vue实现局部刷新

情况一、 原生或jquery项目中引入vue.js时的局部刷新

// html

<tr v-for="(OrderItem,index) in OrderList" v-if="alive">
	...
	<td>
	    <span v-if="!OrderItem.isState" buttonCode="CONFIRM" @click="confirmBackOrder(OrderItem,index)">回单确认</span>
	    <span v-if="OrderItem.isState">已确认</span>
	</td>
</tr>

// js

confirmBackOrder(orderItem,index){
    
         //回单确认
	 var that = this;
	 var confirmOrderList = [{
    
    
	     orderId: orderItem.omOrderId,
	     actCode: orderItem.actCode,
	     orderNo: orderItem.orderNo
	 }];
	 postRequest(tmsUrl + "/save/ConfirmReceipt.json?token="+that.logininf.token+"&timeStamp="+that.logininf.timeStamp,confirmOrderList,function(data){
    
    
	     that.List[index].isState = 1;
	     that.reload();
	 })
},
reload(){
    
         //实现局部刷新
	 var that = this;
	 that.alive= false;
	 this.$nextTick(() => {
    
    
	     that.alive = true;
	 })
}

情况二、 vue项目中的局部刷新

 // 在App.vue中使用provide
 
<template>
  <div id="app">
    <div>
      <router-view v-if="alive" />
    </div>
  </div>
</template>

<script>
	export default {
    
    
	  name: 'App',
	  data() {
    
    
	    return {
    
    
	      alive: true
	    }
	  },
	  provide() {
    
    
	    return {
    
    
	      reload: this.reload
	    }
	  },
	  methods: {
    
    
	    reload() {
    
    
	      this.alive = false;
	      this.$nextTick(() => {
    
    
	        this.alive = true
	      })
	    }
	  }
	}
</script>

 // 在使用局部刷新的组件中使用inject

<script>
    export default {
    
    
        name: 'myComponent',
        data () {
    
    
            return {
    
    }
        },
        inject: ['reload'], //注入
        methods: {
    
    
            confirmBackOrder(){
    
    
                // ...
                this.reload();
            }
        }
    }
</script>