Vue 中的 provide & inject 是什么，如何使用？

PHPz 原创: 2023-06-11 12:05:53 874浏览

Vue.js 是当前前端界非常流行的一款 JavaScript 框架，拥有着响应式的数据绑定、组件化的视图架构以及依赖追踪和模板渲染等等很多的优秀特性。而其中最为常用的功能便是组件化编程，Vue 为我们提供了如组件注册、组件传参等等功能检验，但在某些情况下组件数据的传递便会遇到较为棘手的问题，此时，我们就可以使用 Vue 中提供的 provide 和 inject 解决这类问题。

理解 provide & inject

provide

Vue2.2.0 版本新增了 provide / inject ，其能够更好的帮助我们完成面向对象编程的需求。通俗的讲 provide 就是我们可以在父组件中提供数据，然后再子组件中使用 inject 来获取所需要的数据的一个过程。

提供一个例子来更好的理解 provide ：

<template>
  <!-- 父组件 -->
  <div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from './child-component';
  export default {
    provide: {
      foo: 'bar'
    },
    components: {
      childComponent
    }
  }
</script>

在父组件中，我们向下提供了一个键为 foo 的数据给到子组件中。随后在子组件中我们我可以通过 inject 来获取这份数据。

<template>
  <!-- 子组件 -->
  <div>
    <p>我是子组件，我获取到了一个名为"foo"的属性的值：{{foo}}</p>
  </div>
</template>
<script>
  export default {
    inject: ['foo']
  }
</script>

到这里，我们就实现了提供和注入的完整过程。通过 provide 我们在父组件中提供数据，随后再子组件中使用 inject 来获取数据，从而完成了组件之间的数据传递。

inject

inject 是一个数组，列表中声明要注入的属性名。在子组件注入一个对象，该对象的属性名与提供的键名相同，值为提供的数据。

提供一个具体的事例来理解 inject ：

<!-- 祖先组件: -->
<template>
  <div>
    <div>我是祖先组件</div>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    provide() {
      return { name: 'Colin' }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <div>
    <div>我是父组件</div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from 'view/child-component.vue';
  export default {
    components: {
      childComponent
    }
  }
</script>

<!-- 子组件: -->
<template>
  <div>
    <div>我是子组件</div>
    <p>祖先组件中给我的数据是什么呢？ {{ name }}</p>
  </div>
</template>
<script>
  export default {
    inject: ['name']
  }
</script>

以上代码中，provide 函数可以理解为父组件向下层子组件提供数据，子组件再通过 inject 来接收这份数据，实现了数据的传输过程。