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

今天还遇到了这么一个问题,父组件向子组件传动态值,然后子组件接收之后赋值给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>  //先判断数据是否存在

  

猜你喜欢

转载自www.cnblogs.com/qinyuanchun/p/11938834.html