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