描述
当props的传值类型为对象时,使用deep深度监听只会监听对象现有属性值的变化,不会监听对象属性的增加或者删除。
### 子组件
props:{
obj:{
type:Object,
default:()=>{
}
},
watch:{
'obj':{
handler(newVal,oldVal){
console.log(newVal)//无输出值
},
deep:true
}
}
### 父组件
<parent :obj='obj'></parent>
<script>
export default{
data(){
return{
obj:{}
},
},
methods:{
initData(){
this.obj.status = 'success'
}
}
这里给父组件赋值的status属性无法被监听到。 Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应
解决方法
Vue.set(vm.obj,"status","succes")
this.$set(this.obj,"status","success")
//最常用
this.obj.status= "success";
this.obj = Object.assign({},this.obj)