uniapp里组件传值的异常情况(Watch方法的使用)

时间:2022-01-01 06:56:57

 在用父组件传值给子组件一个参数后遇到了一个问题:

我在父组件传一个 ID值给子组件,但是子组件接收后,通过created生命周期或mounted生命周期里打印传递过来的值都是随机值,并不是我所传递过来的,

原因是:子组件得ID值在前,而父组件在传过去为后.

代码如下

 父组件
<template>
    <view>
       <aaa :id=‘id‘></aaa>  
    </view>
</template>
  
<script>
  data(){
    return{
      id:19754
    }
  },
  onload(){

    console.log(‘‘id‘,this.id)

  },

   method:{
        
  }
</script>


子组件
<template>
    <view>
      {{id}}
    </view>
</template>
  
<script>
  props:[‘id‘],
  data(){},
  mounted(){
  console.log(‘id‘,this.idid)
  },
    method:{
        
    }
</script>

 解决办法:
通过watch来监听传递过来的字段:把这个字段赋值给一个新字段
<template>
    <view>
      {{newID}}
    </view>
</template>
  
<script>
  props:[‘id‘],
  data(){
    return{
      newId:‘‘
    }
  },
  mounted(){
  console.log(‘id‘,this.idid)
  },
  watch:{
    id:fuction(){
      this.newID = this.id
    }  
    console.log(this.newID)
  },
    method:{
        
    }
</script>