vue3中数据的祖宗组件和孙子组件之间传递数据

1、祖先组件传数据给孙子组件

  • 这种属于是常规操作,不过多说,展示例子
    在祖宗组件中
// 把图片传递给孙子组件
provide('imgPath', imgPath.value)

在孙子组件中

// 接受祖组件传递的参数
const imgPathInject = inject('imgPath')

对就是这么简单就可以了

  • 返回来孙子组件传数据到祖宗组件
    步骤其实是一样的,只需要在祖先组件中创建一个带参数的函数,然后孙子组件的数据就通过这个参数传递给祖先组件,而且这个是实时响应式的
    祖先组件
// 接受孙子组件传递过来的数据,通过函数的参数传递过来
const followUpFun = function setFollowUpData(value: string) {
  prompt.value = value
}
provide('followUpData', followUpFun)

孙子组件

const followUpDataFun = inject('followUpData') as ((followUp: string) => void)
function sendFollowUp(followUp: string) {
  followUpDataFun(followUp)
}

数据就可以通过 followUpDataFun 函数给到祖先组件了
好了,谢谢大家,我是努力变成全栈工程师,同时也在做AI相关的创业,喜欢我的可以+ feifei4974

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容