vue3provide与inject的使⽤⼩技巧
主要使⽤来沟通上下⽂，⽐如⽗——⼦——⼦1——⼦2，⽗组件和⼦2组件间的通信，不使⽤这⽅法也能解决的⽅式还有两种
1. props $emit ⼀层⼀层的传 弊端：写着太⿇烦
2. vuex ⽤多了性能就不太⾏了
进⼊正题
官⽅⽂档上只提供了传递值的⽅式，没有提供⼦组件去跨级改⽗级组件的值，但是可以换⼀种写法就可以了，直接代码
代码结构：⽗组件——child组件——son组件
⽗组件
<template>
<div class="text">盒⼦{{state.name}}</div>
<div class="box">
<Child/>
tcon</div>
</template>
<script lang="ts">
import{ defineComponent, ref, reactive, provide }from'vue'
import Child from'./components/child.vue'
export default defineComponent({
components:{
Child
},
tup(){
const state: any =reactive({
旁其name:'zlz',
age:24
})英文名字女孩
const update =(key: string, val: any):void=>{
state[key]= val
}
provide('ref2',{
val: state,// val需要传递的值
update // 更新传递的值的⽅法
})
headersreturn{
state
}
}
英文自我介绍大学生
})
</script>
ps：当然也可以换⼀种写法这⼀种写法要简便⼀点但是语义化更弱
const state: any =reactive({
name:'zlz',ibt
age:24,
清明节 英文
flagdayupdate // 更新state的⽅法
})
provide('ref2', state)
child组件
<template>
<div class="box">
<div class="box">child组件</div>
<Son/>
</div>
</template>
<script>
import{ defineComponent, reactive, toRaw }from'vue'
import Son from'./son.vue'
export default defineComponent({
components:{
Son小学英语学习软件
},
tup(){
}
})
</script>
son组件
<template>
<div class="box">
son组件{{ref2.val.age}}
</div>
<button @click="handleClick">
⼦组件点击
</button>
</template>
<script>
import{ inject }from'vue'
export default{
tup(){
const ref2 =inject('ref2')
const handleClick=()=>{
const key ='age'
ref2.update(key,111)// 调⽤传递下来的⽅法去更新⽗组件的值}
return{
ref2,
handleClick
}
}
}
麦克杰克逊的歌
</script>
