vue3|在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)
}
//子孙组件
点击传值
import {
inject} from 'vue'
setup(){const money=inject('money')
const handleSend=()=>{money(200)
}
}
总结：子组件传递数据给爷爷组件，需要通过provide一个函数的方式实现
- 爷爷组件传递一个函数，后续通过函数的形参获取数据
- 孙子组获取并调用该函数传递数据
