为什么使用provide和inject
常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props
属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便后期维护。
在Vue中provide
和inject可以
帮助我们解决多层次嵌套嵌套通信问题。在provide
中指定要传递给子孙组件的数据,子孙组件通过inject
注入祖父组件传递过来的数据。
其实,provide
和 inject
主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
如何使用provide和inject
provide
:是一个对象,或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西,也就是属性和属性值。注意:子孙层的provide
会掩盖祖父层provide
中相同key
的属性值。
inject
:一个字符串数组,或者是一个对象。属性值可以是一个对象,包含from
和default
默认值,from
是在可用的注入内容中搜索用的 key
,意思就是祖父多层provide
提供了很多数据,from
属性指定取哪一个key
;default
指定默认值。