先来看看官网的介绍:
简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱。这个就是这对选项要干的事情
provide和inject需要配合使用,它们的含义如下:
provide ;一个对象或返回一个对象的函数,该对象包含可注入起子孙的属性,可以使用ES6的Symbols作为key(只有原生支持Symbol才可以)inject ;一个字符串数组或一个对象 ;字符串数组 ;provide对象里哪些属性可用 ;一个对象 ;key是本地的绑定名,value是provide里对应的对象名,也可以是一个对象,此时from属性是provide里对应的对象名,default属性是不存在时的默认值
来个例子理解一下
<!DOCTYPE html> <!--例1--> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"><child></child></div> <script> Vue.component('child',{ inject:['message'], template:'<p>{{message}}</p>' }) new Vue({ el:'#app',provide:{message:'Hello Vue!'} }) </script> </body> </html>
以上就是Vue.javascript源码分析(八)基础篇依赖注入provide/inject组合详解。成功都永远不会言弃,放弃者永远不会成功。更多关于Vue.javascript源码分析(八)基础篇依赖注入provide/inject组合详解请关注haodaima.com其它相关文章!