vue.js入门（七，provide / inject）

组件之间的新通信，适用于分支子组件之间，比如爷爷A下面的儿子BC，B下面的儿子E跟C下面的儿子F之间的通信（EVent Bus 早期都是使用如此，之前文章有demo）

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

写个简单的Demo（并不推荐使用，仅仅介绍使用方法，provide inject 会有一个类似冒泡的特性，数据源有可能在中间被”“打断”，甚至是有可能被组件库中的组件打断，或者打断组件库中的provide，不利于维护 ）

代码很简单，首先引入 A B 两个子组件，

A B 没其他代码，仅仅是进入子组件，使其C D成为孙子组件

  provide(){
    return{
      foo:{
        name:'Vue'
      }
    }
  }

在App.vue的主组件申明，接下来我在C D 孙组件中接受

使用inject接受，可以看到与props接收很类似，那么就可以直接在上方使用插值显示了

那么inject也可以类似prop一样做一些处理

inject:{
        foo: {
            from: 'foo',
            default: () => [1, 2, 3]
        }
    }

如果是基础类型的话，default直接设置就行，并且此时没有provide的存在也可以使用（但是没有你用个啥）

这里有个from字段，这个是为了防止属性名重复一些操作

这样哪怕我这边接受的是foos，但是数据来源还是foo

如果你的模板是函数式组件的话，就不能使用插值来获取了

D孙子组件

函数式组件这块后面可能会拎出来写一篇（主要是目前自己理解不是很好，怕误人子弟）

接下来写一个方法，让他改变，那么我在data中声明一个name，此时通过change改变这个name，但是很遗憾无法改变！（当然值是改变了，但是没法更新，因为此时子组件接受的数据并不是响应式）

直接给foo一个响应式返回（直接返回当前实例）

  provide(){
    return{
      foo:this
    }
  },

此时就同时修改成功了

有一种情况就不演示了，就是如果我在父组件B的时候也调用一个provide，那么孙子组件是在冒泡找到这个数据的时候就停止了（所以这种情况先问过老大再使用吧！）