vue组件深度传值provide、inject,值类型响应式的方法

---

前言

最近封装了一个上传,下载,查看附件的组件,其中有三层层级关系,需要深层次传值,一开始用props组件传值,但是要传两层感觉有点不优雅.后面上面查了vue的provide,inject方法,但是因为是传的值类型不能响应式,后面想到了一个方法可以响应式//

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、provide,inject是什么？

通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。
对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

二、使用步骤

1.祖先组件provide注入，并且传入的是整个this指向

    provide() {
        return {
            uploadId: this,
        };
    },

2.后代组件接收

代码如下（示例）：

// 祖宗组件传值
inject: ['uploadId'],

总结

通过provide、inject 可以实现深度组件传值，不用繁琐的props传递很方便。普通值类型想要后代组件可以随时响应变化可以直接将父组件整个this对象传过去，祖先组件的值变化了后代的值也会跟着变化。