一,provide,inject使用:
应用场景:向孙组件传数据
应用Vue3碎片: ref,reactive,isRef,provide, inject
1.provide,inject使用
a.爷组件引入
import {ref,provide} from 'vue'
const drinkList=ref({
   drink:['蜜雪冰城']}
);
provide('drinkList',drinkList)
 
a.孙组件取用:
import {ref,inject,isRef} from 'vue'
const getDrink=inject('drinkList')
const drinkName=reactive({val:""})
function getRole(){
 if(isRef(getDrink)){
  drinkName.val=getDrink._rawValue.drink[0]
 }
}
 
c.获取显示
<ListItem>已点饮品:{{drinkName.val}}</ListItem>
 
二,全局注入取用:
应用Vue3碎片: ref,app.config.globalProperties,getCurrentInstance
a.main.js中
app.config.globalProperties.$user={
name:"Nick",
role:"顾客",
}
 
b.孙组件中中取用
import {ref,inject,isRef,getCurrentInstance} from 'vue'
const supRoot = getCurrentInstance();
const user=supRoot.appContext.config.globalProperties.$user;
const getrole=ref('')
function getRole(){
 getrole.value=user.role;
}
 
c,获取显示
<ListItem>当前用户名:{{$user.name}}</ListItem>
<ListItem>获取角色名: {{getrole}}</ListItem>
 
三,显示效果:

简单使用,总结至此,欢迎各位工友交流学习。
 传送门:
 1.provide(),inject()
 2.app.config.globalProperties
 3.Vue3中使用自定义指令
 


















