赞
踩
最近在研究gitHub中的一个项目并将与自己之前完成的项目进行结合,其中有一个功能是需要在孙组件将数据传递给爷组件,笔者研究后将使用总结如下:
1.爷组件先定义一个空的函数传递给孙子
2.孙组件使用inject接收
3.孙组件在函数中调用爷爷传递过来的函数,并在()中传递要传递的数据
4.调用这个函数(也可以使用点击事件等方式触发)
5.爷组件在当初定义的空函数中获得孙组件传递过来的值tValue
- <script lang="ts" setup>
- import { ref, onMounted, provide } from "vue"
- const tValue = ref("")
- //1.爷组件先定义一个空的函数传递给孙子
- provide("passValue", passValue)
- //5.爷组件在当初定义的空函数中获得孙组件传递过来的值tValue
- const passValue = (codeValue: string) => {
- tValue.value = value
- }
- console.log(tValue.value)
- </script>
- <script lang="ts" setup>
- import { inject } from "vue"
- const value = 2000;
- //2.孙组件使用inject接收
- const passValue = inject("passValue")
- //3.孙组件在函数中调用爷爷传递过来的函数,并在()中传递要传递的数据
- const sendValue = () => {
- passValue(value)
- }
- //4.调用这个函数(也可以使用点击事件等方式触发)
- sendValue()
- </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。