父组件
<template>
<div>
<children :testWatchData1='testWatchData'></children>
<button @click="testWatch"></button>
</div>
</template>
<script>
import children from './children'
export default {
name:'parent',
data:{
return {
testWatchData:{a:1,b:2}
}
},
methods: {
testWatch(){
this.testWatchData.a+=1
},
}
}
</script>
子组件
<template>
<div>
<div>{{testWatchData1.a}}</div>
</div>
</template>
<script>
export default {
name:'children',
data:{
return {
}
},
methods: {
},
props:{
testWatchData1:{
type:Object,
define:{}
}
},
watch:{
testWatchData1:{
handler(val,oldval){
console.log(val);
console.lo(oldval)
},
immediate:true, //immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
deep:true //当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
}
}
}
</script>