Vue3 依赖注入------父级组件与子孙级组件之间的数据传递

依赖注入是针对父级组件与子孙级组件之间的数据传递数据的传递，或者有很多后代组件的情况，只针对直系后代使用，实现组件之间的数据共享。

爷爷组件给孙子组件传递数据

需要使用到vue提供的provide以及inject方法

其中，provide用来提供传递的数据，inject用来接收数据

爷爷组件

孙子组件

子组件的如果也想要使用爷爷组件的数据，操作方法是一样的，也是通过inject进行接收并且return，然后直接使用即可。

总结：

1.父传子孙数据：provide

2.子孙得到数据：inject

---

孙子组件传递数据给爷爷组件

这里还是使用provide和inject来进行数据的传递，但是这次是通过函数的参数进行传值。

1.导入provide和inject到父组件中

2.通过provide声明函数，并要有形参用来接收孙组件传来的实参

父组件

孙子组件

总结：

1.孙子组件传递数据给爷爷组件，需要通过provide一个函数的方式实现

2.爷爷组件传递一个函数，后续通过函数的形参获取数据

孙子组件获取并调用该函数传递数据

---

总结：

1.父子传参：

爹给儿子传递数据，通过自定义属性，给组件props属性，然后绑定在父组件的子组件上

儿子给爹传递数据，通过自定义事件

2.爷爷孙子传参：

孙子给爷爷传值是函数，通过provide一个函数，在孙子组件inject注入，然后通过参数传递想要传递的值

爷爷给子孙传递数据，通过provide一个变量和值，在孙子组件inject注入，孙子组件通过inject接收数据即可。

3.后代给前辈传数据都需要函数传参

4.自定义属性、事件（函数）一般都绑定在父组件中，也就是provide一般出现在父组件，不论是提供给孙组件的数据还是接收孙组件数据的函数