vue3 setup (组合式 API) 父子传参，父孙传参。provide异步传参。

最新推荐文章于 2025-05-26 15:53:19 发布

越来越好。

最新推荐文章于 2025-05-26 15:53:19 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记前端文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_38880700/article/details/127076915

前端同时被 2 个专栏收录

133 篇文章

订阅专栏

笔记

3 篇文章

订阅专栏

本文介绍Vue3中使用组合式API实现父子组件及父孙组件间的数据传递方法，包括通过propsData直接传递和利用provide/inject进行传递。演示了如何在组件中声明接收属性并监听变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3 setup (组合式 API) 父子传参，父孙传参。

通过 propsData传递

//父组件
<--html-->
<problem :resData="resData"></problem>

<--js-->
<script setup>
let resData = reactive({ arr: { name: '李四', age: 1 } });
//异步获取值
function getData(){
   return new Promise((res,rej)=>{
	.......
	resData.arr = {
       name: '张三',
       age: 19
     };
   })
}
</script>

//子组件
<--html-->
<div>{{fpData }}</div>
<fxRadio :fpData="fpData"></fxRadio> //子组件中调用孙组件
<script setup>
const propsData = defineProps({
  resData: {
    type: Object,
    default: {}
  }
});
let fpData = ref({});
fpData.value = propsData.resData;
</script>

//孙组件
<--html-->
<div>{{sdata}}</div>
<script setup>
const propsData = defineProps({
  fpData: {
    type: Object,
    default: {}
  }
});
let sdata= ref({});
sdata.value = propsData.fpData;
</script>

总的来说，给孙组件传递的时候，和父传子的方式是一样的，照搬就行，另外vue3中已经不需要通过watch来监听传递的对象的改变了。

通过 provide传递

//父组件
<--js-->
<script setup>
import { reactive, provide} from 'vue';	//引入provide
let resData = reactive({ arr: { name: '李四', age: 1 } });
//异步获取值
function getData(){
   return new Promise((res,rej)=>{
	.......
	resData.arr = {
        name: '张三',
        age: 19
      };
   })
}
getData();
provide('pData', resData);	//可以不用等接口返回，先进行扩散。异步获得数据后会自动更新。
</script>

//子组件
<--html-->
<div>{{tdata }}</div>

<--js-->
<script setup>
import { inject, ref } from 'vue'; 	//引入inject

let tdata = ref({});
const pData = inject('pData');
tdata.value = pData;
watch(tdata.value, (newval) => {
   console.log('改变了@@', newval);
   //tdata.value = newval;
 });
</script>
//孙组件 与 子组件写法一致