码迷,mamicode.com
首页 > 其他好文 > 详细

父组件向子组件传值遇到的问题

时间:2019-11-26 22:36:48      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:this   net   tps   遇到的问题   font   判断   监听   UNC   ref   

今天还遇到了这么一个问题,父组件向子组件传动态值,然后子组件接收之后赋值给data,然而,当父组件的值变化时,子组件中data 的值说什么也不变。

原因: 子组件赋值给data 值时,就不会改变,要想解决这个问题,用watch 来进行监听。

展示问题:技术图片

 

 解决的方法: 就是再watch 中监听props 传过来的值,然后再给data 里面的值赋值一遍(这个博主的详细的解释了监听不同类型的props 值 : https://blog.csdn.net/weixin_38098192/article/details/80447867

 

props: {
    send: {
      default: 0,
      type: Number
    }
  },

data(){
  number:this,send  
},
watch: {
    send: function(newVal) {
      console.log(newVal);
      this.number = newVal; //一定要写!!!
    }
  },

  这个方法同样可以解决父组件传递的异步数据,当数据还没加载完成,就已经完成了和子组件的传值,所以,加上watch 可以监听到值的变化。

  当异步数据传递时还有一个解决方法:父组件中的数据先做非空判断,如果是空就不初始化子组件,等父组件拿到异步数据再初始化子组件

<nav-footer :send="num" v-if="num.length>0"></nav-footer>  //先判断数据是否存在

  

父组件向子组件传值遇到的问题

标签:this   net   tps   遇到的问题   font   判断   监听   UNC   ref   

原文地址:https://www.cnblogs.com/qinyuanchun/p/11938834.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!