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

一，前言

1.当我们有一个应用涉及的组件层数较深时，若涉及到父组件要向其子组件的子组件的子组件… 传递数据时，我们可以使用props或者$attrs,

2.然而这两种都不是最适合的，都需要在中间组件中一层一层的往下传递。

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

二，父组件provide

1.在vue2中provide使用

{
	provide:{
		mode:"view"
	}
}

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

{
	provide{ //错误使用
	    mode:this.mode 
	}，
	
	provide(){//正确使用
		return {
			mode:this.mode
		}
	}
}

三，子组件inject

1.在vue2中inject使用

{
	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修改
    }
  }

五，vue3中provide和inject

1.在vue3中provide和inject被归于组合式api，需要显式导入

import { provide ,inject ,ref} from "vue" 

const mode = ref("view")
provide("mode","view")
provide("mode", mode ) //在vue3中要使provide和inject具有响应式,只要传递一个ref或者reactive即可

const mode = inject("mode","defaultValue") //第二个参数为默认值

2.vue3中要使provide和inject具有响应式,只要传递一个ref或者reactive即可