1.provide用于在根组件中分享自己组件的变量，inject用于在所有根组件的子组件中注册使用根组件中分享出来的变量。
2.正常vue中使用provide和inject：
根组件：
<script>
export default {
name:‘root‘,
data(){
return {
name:‘tom‘
}
},
provide(){//这里就是父组件分享自己的name属性
return {
name:this.name
}
}
};
</script>
任意子组件中注册使用：
<script>
export default {
name:‘root‘,
inject:[‘name‘]//子组件中注册使用上面父组件分享的name变量
};
</script>
注意：当父组件改变name变量时候子组件中的name变量不会改变即不是响应式的。
3.CompositionAPI中使用provide和inject，它是响应式的：
根组件：
<script>
import { ref, reactive, readonly, toRefs, computed, watch ,provide,inject} from "vue";
export default {
setup(){
let name= ref(‘tom‘);
let user = reactive({
name:‘‘tom,
age:10
});
provide("name",name);//分享自己的name属性
provide("user",user );//分享自己的user对象
return{
name,
...toRefs(user)
}
}
};
</script>
子组件：
<script>
import { ref, reactive, readonly, toRefs, computed, watch ,provide,inject} from "vue";
export default {
setup(){
let name = inject(‘name‘);//注入name属性
let user = inject(‘user‘);//注入user对象
return{
name,
user
}
}
};
</script>