vue 父组件传的值,子组件模板中能渲染,但是mounted不能打印

问题:vue 父组件传的值,子组件模板中能渲染,但是mounted打印出来为空,

<template>
	<div class="manage_page fillcontain">
    <Test :datas="array" />
  	</div>
</template>

<script>
import Test from '../components/test.vue'
    export default {
		computed: {
			defaultActive: function(){
				return this.$route.path.replace('/', '');
			}
		},
    components:{
      Test
    },
    data(){
      return {
        array:[]
      }
    },
    mounted(){
      // 模拟调接口
      setTimeout(()=>{
        this.array = [
          'a','b','c','d','e','f'
        ]
      })
    },
    methods:{

    }
    }
</script>


<style lang="less" scoped>
	@import '../style/mixin';
	.manage_page{
		
	}
</style>
<template>
    <div>
        <div v-for="item in datas" :key="item">{{ item }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    props:{
      datas:{
        type:Array
      }
    },
    created(){
      console.log(this.datas); // 打印为空,在mounted一样
    },
    methods: {
        handleChange(value) {
            console.log(value);
        },
    },
};
</script>

原因: 这是因为子组件挂载的时候,值在父组件里也是为空的,后来父组件做了请求之类的工作后,更新了这个值然后往子组件里面传递,所以开始挂载的时候是值是空的,后来才有值,所以html看起来能渲染出来,实际它之前渲染过一次空的了,只不过两次时间间隔可能比较短。

解决的方法是用watch 来监听Props中的数据然后做出响应的操作

方法一、使用v-if ,等到父组件传值不为空时再传入

 <Test :datas="array" v-if="array.length" />

方法二、用watch 来监听Props中的数据然后做出响应的操作

  watch:{
      datas:{
        handler(val){
          if(val.length){
            console.log(val,'val');
          }
        }
      }
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值