vue3组件传值 reactive赋值响应式失效问题
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>
更多推荐
已为社区贡献3条内容
所有评论(0)