vue如何实现组件传值？掌握provide、inject此种传值方式代表你就已经是一位大佬了！

vue常见的传值方式有很多？

大体的我们可以分为以下几种传值方式

• 父子组件传值：props ，$emit。
• 兄弟组件传值：eventBus公交车机制。
• 上方是最为常用的三种传值方式

但是你以为传值方式只有那么多？并不是

通过Session Storage缓存、Local Storage缓存。

// 父组件
const s = { name: '小明', age: 18 }
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))
// 子组件
const s1 = JSON.parse(sessionStorage.getItem('缓存名称'))

// localstorage同样也是这种方式，当然如果觉得占用内容，我们可以在获取之后使用removeItem将其删除

通过$ parent,$ children,$ root,$ refs另走偏锋同样可以实现组件的传值

以及像我们常用的vuex也同样是一种组件传值的方式

而今天我们主要介绍的一种组件传值方式，其实也就是vue官网给我们的两个api

provide：Object | () => Object

inject：Array<string> | { [key: string]: string | Symbol | Object }

provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。

当然官方也给我们说了不推荐就是普通应用程序代码，但是其实这同样是一种组件传值的方式，当我们涉及到开发组件，造轮子时，这两个api不就派上用场了吗？

首先其实provide与inject就是与像data、methods一样是vue实例的方法

我这个时候是直接给App组件注入了一个provide函数，将祖先参数gFather放置到了这个函数里，那么如何取值呢？

而且最主要的是不管嵌套多少层级，我们是都可以取到这个祖先这个值的，当然前提是你需要调用。

而且官网给我们提供了一句话

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

也就是说我们传入的值并不是响应式的

我们可以看到我在子组件种更改了gFather的值，但是在app组件中对应的祖先值并没有改变，这其实也就是应验了官网给我们说的话，那么如果想要实现响应式，我们该如何去做呢？


当然在子组件输出的也就是appThis.gFather这个变量了

当然还有很多provide、inject像默认值、数组多参，函数等等在这里的话就不一一介绍了，有兴趣的同学其实可以尝试这多看看官网文档，以及自己动手封装一个小组件试一下。