【vue】provide/inject

芳草萋萋鹦鹉洲哦2024-02-25 10:31

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

通途点来讲可以用来实现隔代传值，传统的props只能父传子，而 provide/ inject无论子组件有多深，只要调用了inject那么就可以注入provide中的数据。而不是局限于只能从当前父组件的prop属性来获取数据，这就是它最大的特性。

一、基本语法

provide 选项：一个对象或返回一个对象的函数
inject选项：一个字符串数组，或一个对象，对象的 key 是本地的绑定名

二、代码示例

1、定义一个parent component

html 复制代码

<template>
  <div>
      <childOne></childOne>
  </div>
</template>

<script>
  import childOne from '../components/test/ChildOne'
  export default {
    name: "Parent",
    provide: {
      for: "demo"
    },
    components:{
      childOne
    }
  }
  </script>

在这里我们在父组件中provide for这个变量。

2、定义一个子组件

html 复制代码

<template>
  <div>
    {{demo}}
    <childtwo></childtwo>
  </div>
</template>

<script>
  import childtwo from './ChildTwo'
  export default {
    name: "childOne",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    },
    components: {
      childtwo
    }
  }
</script>

3、定义另一个子组件

html 复制代码

<template>
  <div>
    {{demo}}
  </div>
</template>

<script>
  export default {
    name: "",
    inject: ['for'],
    data() {
      return {
        demo: this.for
      }
    }
  }
</script>

在2个子组件中我们使用jnject注入了provide提供的变量for，并将它提供给了data属性。

这里官网注明例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时，注入的值会在 props 和 data 初始化之后得到。

运行之后看下结果

从上面这个例子可以看出，只要在父组件中调用了，那么在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值。

三、总结

provide/inject使用缺点也很明显，在任意层级都能访问导致数据追踪比较困难，不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了，因此这个属性通常并不建议使用。

provide和inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。