依赖注入是针对父级组件与子孙级组件之间的数据传递数据的传递,或者有很多后代组件的情况,只针对直系后代使用,实现组件之间的数据共享。
爷爷组件给孙子组件传递数据
需要使用到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一般出现在父组件,不论是提供给孙组件的数据还是接收孙组件数据的函数