VUE provide和inject 供应 和 注入

一、概念解析

• 成对出现：provide和inject是成对出现的

• 作用：用于父组件向子孙组件传递数据

• 使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

• 使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

• 官网上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

• provide：Object | () => Object（一个对象或返回一个对象的函数）

• inject：Array | { [key: string]: string | Symbol | Object }（一个字符串数组，或一个对象，对象的 key 是本地的绑定名）

provide和inject响应的例子：

// 父.vue
export default {
  provide: {
    title: 'Hello World'
  }
}

// 子孙.vue
export default {
  inject: ['title'],
  mounted () {
    console.log(this.title);  //Hello World
  } 
}

列子：

用provide（提供）和inject（注入）来实现的现实隐藏可以做到局部刷新

1.在App.vue中使用provide

    

      
    

 export default {
  provide(){
    return{
      reload:this.reload
    }
  },
  data() {
    return {
      isRouterAlive:true
    }
  },
  methods:{
    reload(){
      this.isRouterAlive=false
      this.$nextTick(()=>{
        this.isRouterAlive=true
      })
    }
  }
};

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

vue3写法

// App.vue

• 调用的页面