Vue 组件间的数据共享（2）

Vue 组件间有5种常见的数据共享方式：

1：props & $emit
2：依赖注入(provide,inject )
3：处理边界($root,$parent,$refs)
4：eventbus
5：vuex

下面详细介绍依赖注入方式的数据传递：

依赖注入

优点：当组件嵌套过多，而且所有组件都需要使用根组件的某一些内容时 （数据或方法），使用依赖注入会比普通的传值更加方便
缺点：数据不支持响应式

provide属性：提供给后代组件的数据和方法
inject属性：后代组件中接收根组件的数据和方法

<div id="app">
    <comp></comp>
</div>
 <script>
        const comp = {
            inject: ["myuser"],
            template: `<p>{{myuser}}</p>`
        }

        var vm = new Vue({
            el: "#app",
            data: {
                user: "小唐"
            },
            components: {
                comp
            },
            provide: function () {
                return {
                    myuser: this.user
                }
            }
        });

    </script>

参考文档：Vue教程