写作墨问题 网站,wordpress 前端图片上传,漯河网站建设-千弘网络,百度网站下载再三说明 仅仅个人学习用#xff0c;不误导别人 我觉得props 会创建对应的属性#xff0c;去接受这些值#xff0c;比如传递一个ref的基本值 age props.age age.value 传递一个ref的引用值 person props.person person.value 传递一个reactive的引用值 person props.person…再三说明 仅仅个人学习用不误导别人 我觉得props 会创建对应的属性去接受这些值比如传递一个ref的基本值 age props.age age.value 传递一个ref的引用值 person props.person person.value 传递一个reactive的引用值 person props.person person
最开始时候props指向了一个响应式的reactive person如果我们手动将person {} 整个替换掉是不影响原来指向的值的setup只在初始化时执行一次所有一开始props指向的是一个响应式的person而当前改变的person 并不影响props当中的person 所以也无法监听
1、父组件使用reactive 接收数据
let person reactive({age: 21,name: test,info: {a: 1}
});person 和 info 以及prop都是一个reactive对象都可以作为watch第一个参数
const props defineProps({person: {age: Number,name: String,info: {a: Number}}
});可以监听到info 里边某个属性变化
watch(person.info, (value) {console.log(value);
})
整个info 被替换掉也可以监听到
watch(() person.info, (value) {console.log(value);
})
整个person 替换掉 无法被监听因为props当中的person 指向的是一个已经封装了的reactive对象
如果在父组件当中直接person newValue props是无法监听到的2、父组件使用ref 接收数据
let person ref({age: 21,name: test,info: {a: 1}
});将person.value { } 整个替换
可以监听到
watch(props, (value) {console.log(value);
})
无法监听
watch(props.person, (value) {console.log(value);
})
可以监听到person 被整个替换掉
watch(() props.person, (value) {console.log(value);
})做项目中我将修改 或者 新增的表单组件分离出去了每次新增或者修改时候需要给表单组件传递一个person 值新增时候需要置空修改时候需要赋予值
我们知道person {}是没办法监听到的所以采用
let person ref({age: 21,name: test,info: {a: 1}
});const add (){person.value {}
]const add (){Object.assign(person.value,{age:2,name:test})
]监听变化
