关于vue.js:Vuejs-3x-中跨层级组件如何传递数据

21次阅读

共计 1835 个字符，预计需要花费 5 分钟才能阅读完成。

在 Vue.js 中，跨层级组件如果想要传递数据，咱们能够间接应用 props 来将先人组件的数据传递给子孙组件：

注：上图来自 Vue.js 官网：Prop Drilling。

如上图所示，两头组件 <Footer> 可能基本不须要这部分 props，但为了 <DeepChiild> 能拜访这些 props，<Footer> 还是须要定义这些 props，并将其传递上来。

有人说咱们能够应用 $attrs/$listeners，但仍然还要通过两头层级，而应用 Vuex 又过于麻烦，Event Bus 又很容易导致逻辑扩散，呈现问题后难以定位。

那么，有没有其余办法能够实现间接从先人组件传递数据给子孙组件呢？答案就是 provide/inject。

先人组件：

// Root.vue

<script setup>
import {provide} from 'vue'

provide('msg' /* 注入的键名 */ , 'Vue.js' /* 值 */)
</script>

子孙组件：

// DeepChild.vue

<script setup>
import {inject} from 'vue'
  
const msg = inject('msg' /* 注入的键名 */, 'World' /* 默认值 */)
</script>

具体用法详见：Provide / Inject。

当初，问题解决了：

注：上图来自 Vue.js 官网：Prop Drilling。

这么神奇的货色，到底是如何实现的呢？

export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
  let provides = currentInstance.provides

  const parentProvides = currentInstance.parent && currentInstance.parent.provides
  if (parentProvides === provides) {provides = currentInstance.provides = Object.create(parentProvides)
  }
  
  provides[key as string] = value
}

在默认状况下，组件实例的 provides 继承自其父组件。然而当组件实例须要提供本人的值的时候，它应用父组件的 provides 对象作为原型，来创立本人的 provides 对象。这样一来，当应用 inject 时，咱们就能够 通过原型链来找到父组件提供的数据。

inject 的代码也很简略，简略到你看了之后会来一句：

export function inject(
  key: InjectionKey<any> | string,
  defaultValue?: unknown,
  treatDefaultAsFactory = false
) {
  const instance = currentInstance || currentRenderingInstance

  if (instance) {
    // #2400
    // to support `app.use` plugins,
    // fallback to appContext's `provides` if the instance is at root
    const provides = instance.parent == null
        ? instance.vnode.appContext && instance.vnode.appContext.provides
        : instance.parent.provides

    if (provides && (key as string | symbol) in provides) {return provides[key as string]
    } else if (arguments.length > 1) {return treatDefaultAsFactory && isFunction(defaultValue)
        ? defaultValue.call(instance.proxy)
        : defaultValue
    }
  }
}

inject 的次要性能就两点：