Vue 2.x 中 Provide/Inject 机制的实现原理

2023-11-02 08:28:41

在 Vue 2.x 响应式框架中，提供（provide）和注入（inject）机制扮演着至关重要的角色，尤其是在父子组件之间进行数据传递时。为了深入理解 Vue 2.x 中 Provide/Inject 的实现原理，本文将带您逐行剖析源码，揭开其神秘的面纱。

概述

Provide/Inject 机制允许父组件向其子组件提供数据，而子组件则可以通过 inject 选项来访问这些数据。这为在父子组件之间建立可重用且松散耦合的数据通信提供了一种优雅而便捷的方式。

源码分析

Provide

提供者组件通过 provide 选项向其子组件提供数据。在 Vue 2.x 中，provide 选项是一个对象，包含要提供的属性和值：

export interface Provide {
  [key: string]: any
}

当组件被实例化时，其 provide 选项被注入到 Vue 实例的 provide 属性中。这使得子组件可以通过 parent.$provide 访问提供者的数据。

Inject

注入者组件可以通过 inject 选项来访问提供者的数据。inject 选项是一个对象，包含要注入的属性名：

export interface Inject {
  [key: string]: string | Symbol
}

当组件被实例化时，其 inject 选项被合并到 Vue 实例的 options 中。这使得组件可以通过 this.options.provide 来访问注入的属性。

源码示例

以下是一个使用 Provide/Inject 的简单示例：

Parent.vue

<template>
  <div>
    <p>父组件数据：{{ foo }}</p>
    <Child />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      foo: 'bar'
    }
  }
}
</script>

Child.vue

<template>
  <div>
    <p>子组件数据：{{ injectedFoo }}</p>
  </div>
</template>

<script>
export default {
  inject: ['foo'],
  computed: {
    injectedFoo() {
      return this.foo
    }
  }
}
</script>