[JavaScript知识库]教你在Vue3中如何使用依赖注入完成组件之间的数据传递

教你在Vue3中如何使用依赖注入完成组件之间的数据传递

• 使用依赖注入

  父组件向子孙组件传递数据

// 父组件
import 子孙组件
import {ref,provide} from 'vue'
  setup(){
    provide('moneyInfo',1000)
    return{moneyInfo}
  }
//孙子组件
import {inject} from 'vue'
setup(){
  const moneyInfo=inject('moneyInfo')
  return{moneyInfo}
}

总结：

                     父传子孙数据：provide
                     子孙得到数据：inject

子孙组件向父组件传递数据

//父组件
import 子孙组件
import {ref,provide} from 'vue'
setup(){
  // 封装接收孙子组件数据的函数
  const money=(val)=>{
    console.log('子孙组件传递的数据',val)
  }
  provide('money',money)
}
//子孙组件
<div @click='handleSend'>点击传值</div>
import {inject} from 'vue'
setup(){
  const money=inject('money')
 
  const handleSend=()=>{
    money(200)
  }
}

总结：子组件传递数据给爷爷组件，需要通过provide一个函数的方式实现

1. 爷爷组件传递一个函数，后续通过函数的形参获取数据
2. 孙子组获取并调用该函数传递数据