Valor passando entre componentes pai e filho em vue3

1. Passe valor entre pai e filho

O código é o seguinte (exemplo):

//父组件中的值
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的值
 }

Resumir

Fornecer/injetar pode não apenas realizar de pai para filho, mas também de pai para neto, ou seja, transferência de valor entre componentes.
Para filho para pai ou neto para ancestral, você só precisa usar uma função intermediária para alterar o valor no pai ou ancestral.