provide / inject 组合讲解

• 描述
  该组合用于父组件与子组件子孙组件间的通信，非父子（子孙）兄弟关系不可使用该组合，provide为父组件提供的属性或者方法，inject为子组件或者子孙组件用于接收祖先组件传来的属性或者方法。provide选项应该是一个对象或返回一个对象的函数，inject选项应该是一个字符串数组或一个对象：对象的key是本地的绑定名。
• 例子

// parent组件
<template>
  <div>
    <div>{{test}}</div>
    <button @click="changeTest">修改test的值</button>
    <son></son>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  name: "parent",
  components: { Son },
  provide() {
    return {
      injectData: this.test
    };
  },
  data() {
    return {
      test: "测试",
    };
  },
  methods: {
    changeTest() {
      this.test = "测试后";
    }
  }
};
</script>

//son组件
<template>
  <div>{{injectData}}</div>
</template>


<script>
export default {
  name: "son",
  inject: ["injectData"],
  mounted() {
    // eslint-disable-next-line
    console.log(this.injectData)
  },
};
</script>

如何使用provide / inject组合刷新页面

App.vue中配置provide

• 描述
  在路由入口处添加v-if控制元素显示与隐藏，然后定义元素刷新方法，并将该方法放入provide中
• 代码

<template>
  <div id="app" v-if="load">
    <router-view/>
  </div>
</template>

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
import AvueRouter from '@/router/avue-router'
import Store from '@/store/'
import PageRouter from "./router/page";
import ViewsRouter from "./router/views";
import Router from "./router/router";
// Vue.use(VueRouter)
  export default {
    name: 'app',
    provide(){
     return {
        reload:this.reload
}
  },
    data() {
      return {
load:true
}
    },
    watch: {},
    created() {
    },
    methods: {
        reload(){
        this.load=false
        this.$nextTick(()=>{
        this.load=true
})
}
    },
    computed: {}
  }
</script>
<style lang="scss" scoped>
  #app {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>

在使用的地方配置inject

• 描述
  在测试文件中引入inject配置reload方法，在相应地方调用reload
• 代码

<script>
export default{
      name:'',
      inject:['reload'],
      methods:{
      handleReload(){
       this.reload()
      }
   }
}
</script>

总结

使用此方式可以轻松实现vue单页面的刷新，相比较窗口重载此种方式值得推荐：达到无感刷新页面。但是遇到页面有复杂的编辑数据时，改种全局刷新的方式不会保存编辑数据，因此这种情况下不太推荐此种方式，可以使用局部刷新的方式。

局部刷新

• 描述
  局部刷新即部分元素实现刷新，该种方式在有复杂编辑数据的页面中推荐使用，例如右侧有编辑的数据表单，只需要刷新左侧菜单栏的情况下可以使用局部刷新，刷新左侧菜单而保留右侧表单状态不变。
• 核心代码
  其实全局刷新和局部刷新的核心思路都是短时间内控制v-if的隐藏然后显示，核心代码如下：

this.load=false
this.$nextTick(()=>{
 this.load=true
})