vue组件隔代传值 provide / inject

一般在层级不多的组件中，我们都是用props去和子组件通信，但是如果层级比较多了，props用起来就显得不是那么灵活了。这个时候要么用订阅发布消息，要么用vuex来解决传值的问题。而vue官方也同时推出了一组api： provide / inject 用来隔代传值。
provide/inject需要一起使用，我们可以从父组件的provide传值，子组件或者孙组件，就可以用inject来接受子组件的provide属性值
具体使用方法如下

首先在父组件中注入provide

provide(){
        return{
            count:this.count
        }
    },// 和data，method等属性平级，
data(){
      return{
          count:1
      }
}

子孙组件接收

inject: ['count']
mounted(){
conslole.log(this.count)
}

这样就完成了基本使用。可以把provide想象成一个容器，他去把需要多层传递的data里的属性都收集起来，并且重新给个key。然后子组件里可以通过inject来接收这些属性，inject的值是一个数组，里面放上需要接收的属性的key就可以了。

当然，这样传递的数据并不是响应式的，文档中已经说明。如果想要响应式那provide传递的值就得是个响应式对象，比如这样

provide(){
        return{
            count:this.count
        }
    },// 和data，method等属性平级，
data(){
      return{
          count:{
                val:1
              }
      }
}

父组件这样注入，子组件就会接收到一个可响应的数据了。

传值解决了，那此时子组件该如何跟父组件通信呢。大家都知道，子组件是不可以修改父组件的数据了。vue为了保证数据的可维护性，是不提倡子组件去修改父组件的数据的。所以一般我们都是在父组件里写个方法，然后将此方法传递给子组件，子组件通过$emit来调用这个方法，以达到修改数据的目的。

那么在provide / inject应该怎么做呢？

其实也很简单，我们同样可以在provide中注入一个方法，提供给子组件修改数据。子组件只需要接收，调用就醒了。