组件通信5：深层通信（provide和inject）

一，前言

1.当我们有一个应用涉及的组件层数较深时，若涉及到父组件要向其子组件的子组件的子组件… 传递数据时，可以使用props或者$attrs，然而这两种都不是最适合的，都需要在中间组件中一层一层的往下传递。

3.对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。

二，父组件provide

1.在vue2中provide是option api的一个选项，接受一个对象或函数。

{
	provide:{
		mode:"view" //传递一个常量
	}
}

2.若要在provide中使用组件实例this时，需要将provide变成函数形式

{
	provide{ //错误使用
	    mode:this.mode 
	}，
	
	provide(){//正确使用
		return {
			mode:this.mode //传递一个响应式数据
		}
	}
}

三，子组件inject

1.在vue2中inject也是option api的一个选项，接受一个数组，注册引用。

{
	inject:["mode"]
}

2.不管层次多深，只要属于子组件，都可以接收到父组件的provide

3.inject可以像data和props被this访问到，也可以直接用于模板内。

四，响应性

1.provide和inject默认是没有响应性的

2.在vue2中，我们可以使用Vue.computed让provide具有响应性

  provide() {
    return {
 	  mode:this.mode, //不具有响应性，也就是说在父组件修改了mode，子组件inject部分不会响应    
      mode: Vue.computed(() => this.mode) //具有响应性，子组件inject会跟随父组件provide修改
    }
  }