vue3中props的传值问题（传值失败，传值无法响应变化）

问题描述

一般遇到父组件给子组件传值，props必不可少，但是在vue3中，有的人会遇到子组件接收到props中的值不会更新的情况，比如

//父组件
<template>
	<son :sonData="fatherData" />
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import son from './son.vue';
	const fatherData = ref('xxx')
</script>

//子组件
<template>
	<div>123</div>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	const props = defineProps(['sonData'])
	const aa = ref()
	aa = props.sonData  //这里无法获取到aa的响应值，只会获取到第一次父组件中aa的默认值
</script>

子组件的aa值并不会随着父组件中fatherData的变化而变化，甚至如果你的父组件中fatherData没有赋初始值，在子组件中props.sonData直接会是undifined

原因分析

因为 ref 是对传入数据的拷贝，但 toRef 是对传入数据的引用。

解决方法

在子组件中使用toRef或者toRefs

import { ref, toRefs, toRef } from "vue";
const props = defineProps(['sonData']);
const aa = toRef(props, 'sonData');
//或者下面这种
const { sonData } = toRefs(props); //直接使用props中的sonData

这样传入的数据赋值后就可以随父组件中值的变化而变化了