美文网首页
Vue - provide和inject

Vue - provide和inject

作者: ElricTang | 来源:发表于2019-10-17 16:41 被阅读0次

Vue 2.2.0新增了一对依赖注入API，provide 和 inject。

  • 主要作用：

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

  • 官网的解释比较难明白，简单的讲就是一个父组件向它的所有子组件发布数据，而且所有子代、子孙组件都能拿到。

有什么用？

  • 回顾之前讲到的父子组件传值（props），只是相隔一层关系。
  • 假如要从爷爷组件传值到子孙组件（也就是再多一层嵌套），使用props的方法就很麻烦了。
  • provide和inject就是应对这种场景。（其实用Vuex更方便）

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src='./node_modules/vue/dist/vue.js'></script>
        <script src='./node_modules/vue-resource/dist/vue-resource.js'></script>
    </head>
    <body>
        <div id='app'>
            <child></child>
        </div>
        <script>
            var grandSon = {
                template:'<p>孙子组件:{{msg}}</p>',
                inject:['msg'],
            };
            var child = {
                template:'<p>子组件:{{msg}}<grandSon></grandSon></p>',
                inject:['msg'],
                components:{
                    grandSon
                }          
            };
            var vm = new Vue({
                el:'#app',
                provide(){
                    return {
                        msg:'hello world from father'
                    }                
                },
                components:{
                    child
                }  
            })
        </script>
    </body>
</html>

相关文章