vue js中使用provide与inject传值

正常情况下，我们传数据都是在父子组件中通过props的方式进行父子组件间的传值，这种方式传数据不能跨"辈"，如果想要从祖组件传数据到子组件需要一层层的传递，这样会显得很麻烦

provide与inject解决的是祖孙组件中传值的问题：把祖组件的数据直接传递到子组件

provide（）函数：

定义：提供一个值，可以被后代组件注入

实现：祖、父组件中有一个provide()函数选项来提供数据，后代组件中有一个inject选项来接收数据

provide(第一个参数,第二个参数)接收两个参数,第一个参数是要注入的key,它可以是一个字符串或一个symbol,第二个参数是要注入的值(具体要传递给子孙组件的数据)

provide是vue官方提供的componsition API

具体实例：

上面的实例通过provide（）提供了一个值，这样后代组件就能通过inject来接收这个由祖父组件传递过去的值

inject（）函数

定义: 注入一个由祖先(父)组件或整个应用提供的值

实现: 接收父(祖)组件传递过来的值

inject(第一个参数,第二个参数(可选)):第一个参数是注入的key,来自父(祖)组件,它们两者是需要保持一致的

第二个参数是可选的,即没有匹配到key时,使用默认值,它也可以是一个函数,用来返回某些创建起来比较复杂的值,如果默认值本身就是一个函数

那么必须将false作为第三个参数传入,表明这个函数就是默认值

具体代码实例如下：

总结：

provide()与inject()就是解决跨组件之间通信的一种方式，对于层级嵌套比较深的组件，若子孙组件想要拿到祖父组件中的数据是很繁琐的，就可以使用这种方式去应对这种场景