Vue中provide/inject

特点

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

格式

provide 选项应该是：

一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 选项应该是：

一个字符串数组或 一个对象，对象的 key 是本地的绑定名（自定义的一个名字），value 是：在provide传过来的值(字符串或 Symbol)，或一个对象，该对象的：from 属性是provide传过来的 (字符串或 Symbol)，default 属性是降级情况下使用的 value

简单来说是：父级：provide:{parentValue:' '},孙级：inject:['parentValue']

示例：

父级

<template>
  <div>
    <h1>HelloWorld</h1>
    <One></One>
  </div>
</template>

<script>
import One from "./One";
export default {
  components: { One },
 
  provide() {
    return {
        qinqin:this
        value:this.value
    };
  }
};
</script>

 

子级

// 子组件
    const ChildComponent={
      name:'comp',
      components:{
        SunChildComponent
      },
    }
    template:`
      <div :style="style">
      <slot :value="value" :qin="qin"></slot>
      <sun-child-component></sun-child-component>
      </div>
    `,
    data(){
      return{
        value:'component val',
        qin:'component qin'
      }
    }

 

孙级

// 孙组件
     const SunchildComponent={
       template:'<div>child component</div>',
      //  跨级使用了父组件的数据
      inject:['qinqin'],
      mounted(){
        console.log(this.qinqin)
      }
     } 

 

理解

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。