Vue3中provide,inject使用

一，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中使用自定义指令