当前位置:   article > 正文

Vue3使用provide和inject实现孙组件给爷组件传递数据

Vue3使用provide和inject实现孙组件给爷组件传递数据

前言:

最近在研究gitHub中的一个项目并将与自己之前完成的项目进行结合,其中有一个功能是需要在孙组件将数据传递给爷组件,笔者研究后将使用总结如下:

具体步骤:

1.爷组件先定义一个空的函数传递给孙子

2.孙组件使用inject接收
3.孙组件在函数中调用爷爷传递过来的函数,并在()中传递要传递的数据
4.调用这个函数(也可以使用点击事件等方式触发)
5.爷组件在当初定义的空函数中获得孙组件传递过来的值tValue

爷组件:

  1. <script lang="ts" setup>
  2. import { ref, onMounted, provide } from "vue"
  3. const tValue = ref("")
  4. //1.爷组件先定义一个空的函数传递给孙子
  5. provide("passValue", passValue)
  6. //5.爷组件在当初定义的空函数中获得孙组件传递过来的值tValue
  7. const passValue = (codeValue: string) => {
  8. tValue.value = value
  9. }
  10. console.log(tValue.value)
  11. </script>

孙组件:

  1. <script lang="ts" setup>
  2. import { inject } from "vue"
  3. const value = 2000;
  4. //2.孙组件使用inject接收
  5. const passValue = inject("passValue")
  6. //3.孙组件在函数中调用爷爷传递过来的函数,并在()中传递要传递的数据
  7. const sendValue = () => {
  8. passValue(value)
  9. }
  10. //4.调用这个函数(也可以使用点击事件等方式触发)
  11. sendValue()
  12. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/寸_铁/article/detail/739815
推荐阅读
相关标签
  

闽ICP备14008679号