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

Posted 2021-03-24 qinyuanchun

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