vue中的依赖注入 provide 和 inject

vue中的依赖注入 provide 和 inject

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com

vue中的依赖注入 provide 和 inject

provide 选项允许我们指定我们想要提供给后代组件的数据/方法。

下面是一个组价刷新的案列

<template>
  <div >
    <div class="view">
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRouterAlive: true
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}

然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：

inject: ['reload']

注：依赖注入所提供的属性是非响应式