vue中watch的深度监听—针对引用数据(数组、对象等)
1、首先父组件将值传递给子组件:
<!--图书入库-->
<div v-if="fatherStage=='7-3'">
<stepThree :step3Data="step3Data" @examineFn="examineFn" :modelPrintNum="modelPrintNum"></stepThree>
</div>
2、子组件接收父组件的值,并深度监听,以便操作数据:
<script>
import "@/styles/commonRe.css";
import Cookies from "js-cookie";
import {bookStorageAPI} from '@/api/newBook/printing';
export default {
name: 'HelloWorld',
//接收的父组件的传值
props:['modelPrintNum','step3Data'],
data() {
return {
isShow:true,
step3Form: {
bigBankCount:'',
},
dataList:{},
vueStatus: false,
dataSubmitLoading: false,
stage:[
{title:'入库信息',name:'样书数量',remark:'备注'},
{title:'其他说明',name:'入库数量',remark:'库房备注'},
],
}
},
created() {
this.step3Form=this.step3Data||{bigBankCount:'',};
if(this.$route.fullPath.indexOf('lookId') >= 0){
this.vueStatus = true;
}
},
watch: {
modelPrintNum:{
handler(val){
this.modelPrintNum = val
if(val.printNum && val.modelBookNum){
//大库数量 = 印数 - 样书
this.step3Form.bigBankCount = val.printNum - val.modelBookNum
//小库数量 = 样书
this.step3Form.smallBankCount = val.modelBookNum
this.isShow = false
this.$nextTick(()=>{
this.isShow = true
})
}
},
//深度监听传入的 modelPrintNum 数据
deep:true,
//立即执行handler中的操作,即可完成对 父组件传入值 的操作
immediate:true,
}
},
methods: {
},
}
</script>