vue3组件传值 reactive赋值响应式失效问题

问题

在进行父子组件传值或者在当前使用reactive()重新给属性赋值的时候会发现数据在页面中不是响应式了。

解决方法

因为重新赋值已经改变了原有的内存指向地址，变成了普通的对象解决方法如下：
可定义对象添加一个属性来管理你所需要变动的值

父组件

app.vue

<template>
	 <h3>这是父组件</h3>
	<child title="标题" :data="data"></child>
	 <button @click="fatherBtn()">点击改变父组件传值</button>
</template>
<script setup lang="ts">
	import { reactive } from 'vue'
	import Child from './components/child.vue'
	// 这种会失去响应式
	// let data = reactive({
	// 		name:'张三',
	// 		age:66
	// 	})
	// 	const fatherBtn = ()=>{
	// 		data = {name:'李四',age:100}
	// 	}

	// 修改后
	let data = reactive({
		data:{
			name:'张三',
			age:66
		}
	})
	const fatherBtn = ()=>{
	 	data.data = {name:'李四',age:100}
	 }
</script>

子组件

<template>
  <div>这是子组件</div>
  <div>
    这是父组件的传值+++{{props.title}}
  </div>
  <div>
    这是父组件的传值2+++{{props.data}}
  </div>
  <button @click="btn">查看传值</button>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
const props = defineProps<{
  title: string
  data: object
}>()
function btn(){
  console.log(props.data.data)
}
</script>