一，前言
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即可
