父组件给子组件传值,有时是从后台请求到的数据,我们如果是需要在子组件中处理这个数据的话这个值可能会还没有请求到,返回的是undefined,所以我们需要监听这个数据然后做处理,监听就要用到watch了
代码:
//父组件:
<template>
<child :data="data"></child>
</template>
<script>
export default {
data(){
return {
data:{}
}
},
mounted(){
ajax(code).then(res=>{
this.data=res.data
})
},
}
</script>
///子组件:
<script>
export default {
props: {
data:{
type:Object,
}
},
data() {
return {
dataObj:{},
};
},
watch:{
data:function(newVal,oldVal){
//console.log(newVal);
this.dataObj=newVal;
newVal && this.fun(); //newVal有值时执行fun函数
}
},
methods: {
fun:function(){
console.log(this.dataObj);
},
}
}
</script>