vue3中父子组件传值

1.父子相互传值

代码如下（示例）：

//父组件中的值
import {
    
    ref,provide} form 'vue'

const Arrb = ref(100)
const changeArrb = (n) => {
    
    
	console.log(Arrb)
	Arrb.value = n
			}
const mapRef=ref()
//提供出去值或者方法
provide('mapRef',mapRef)
provide('changeArrb', changeArrb)


//子组件中
import {
    
    inject,watch} form 'vue'
//接受
const mapRef=inject('mapRef')
const changeArrb = inject('changeArrb')
//监听接收到的值
watch(mapRef,(value,old)=>{
    
    
console.log(value)
})
//使用接受的函数，可实现子传父或者在孙子中接受调用，实现孙子传祖
const fn = () => {
    
    
   changeArrb(200000) // 子传父，使用changeArrb方法 修改Arrb的值
 }

总结

provide/inject不仅可以实现父传子，也可以实现父传孙也就是跨组件传值。
对于子传父或者孙子传祖，则只需要借助一个中间函数实现更改父或祖中的值即可。